1
I’m trying to create a img
with the Event of onClick
in the React
but it’s printing the code that way on the Web.
My Internet code is like this:
coluna4.innerHTML = `<img onClick={() => this.apagar(${key})} class='ml-6' width='30' height='30' src='https://cdn.icon-icons.com/icons2/1489/PNG/128/rubbishbin_102620.png' alt='Excluir' title='Excluir' />`
My function that receives parameter:
apagar = (key) => {
console.log(key)
}
Example Complete Code
export default class Product extends Component {
state = {
produtos: [],
}
componentDidMount() {
for (var i = 0; i < sessionStorage.length; i++) {
var key = sessionStorage.key(i)
var session = sessionStorage.getItem(key);
var split = session.split('-');
var tabela = document.getElementById('tb-cart');
var linha = tabela.insertRow(-1);
//Adiciona dua coluna na linha criada <td></td> <td></td>
var coluna1 = linha.insertCell(0);
var coluna2 = linha.insertCell(1);
var coluna3 = linha.insertCell(2);
var coluna4 = linha.insertCell(3);
//Inclui o valor do campo do formulário em sua respectiva coluna
coluna1.innerHTML = split[1];
coluna2.innerHTML = split[0];
coluna3.innerHTML = split[2];
coluna4.innerHTML = `<img onClick={() => this.apagar(${key})} class='ml-6' width='30' height='30' src='https://cdn.icon-icons.com/icons2/1489/PNG/128/rubbishbin_102620.png' alt='Excluir' title='Excluir' />`
}
}
inserirCarrinho = async (id) => {
const response = await api.get(`/livros/listar/${id}`)
sessionStorage.setItem(id, response.data.descricao + "-" + response.data.nome + "-" + response.data.valor)
}
apagar = (key) => {
console.log(key)
}
render() {
return (
<div>
<Header />
<Table id="tb-cart" className="container" striped bordered hover>
<thead class="thead-dark">
<tr>
<th>Nome livro</th>
<th>Descrição</th>
<th>Valor</th>
<th></th>
</tr>
</thead>
</Table>
</div >
)
}
}
coluna4.innerHTML
already have wrong commands right away if you realize that you must ta starting, has to be done with the commands of theReact
, I’d like to help, but since I don’t know all your code gets complicated.– novic
I’ll comment on my code
– Gustavo Henrique
You know that part where you have the method
componentDidMount()
if you have to do this with command of theReact
, needs to learn the right way ... understood the problem?– novic
Not yet expensive,
componentDidMount()
is not from React?– Gustavo Henrique
I decided to make an example ... just test is how it fills a table and any element because the
React
needs to control the states of this component.– novic