1
It may seem like a repeated question, but the examples I found are complicated and need a predefined array, I don’t have that, I wonder what is the simplest way to add an element to the DOM with React, knowing that it is not like jQuery and I must change the state of the component.
Update 1: I’m adding code to explain to Marcelo better my problem.
<tr>
<td>
<InputMask maxlenght="10" className="form-control" mask="99/99/9999" type="text"/>
</td>
<td>
<InputMask style={{'fontSize': '13px'}} mask="9999/99-99999" className="form-control" type="text"/>
</td>
<td>
<InputMask maxlenght="10" className="form-control" type="text"/>
</td>
<td >
<InputMask className="form-control" type="text"/>
</td>
<td>
<InputMask className="form-control somatorio" maskChar="0" mask="99:99" type="text"/>
</td>
</tr>
Well, I’d like to add this tr
to a tbody
, whenever the user clicks on a button
, but when adding, it deletes the already existing content in tbody
.
Update 2: I changed the way it’s done, using state, follow the code
Component
constructor(props) {
super(props);
this.state = {
rows: []
};
}
insereRow() {
this.setState(prevState => ({
rows: [...prevState.rows, 'row1']
}))
}
Rendering in HTML, through the map
{this.state.rows.map((rows) =>
<tr key={rows}>
<td>
{rows}
<InputMask maxlenght="10" className="form-control" mask="99/99/9999" type="text"/>
</td>
<td>
<InputMask style={{'fontSize': '13px'}} mask="9999/99-99999" className="form-control" type="text"/>
</td>
<td>
<InputMask maxlenght="10" className="form-control" type="text"/>
</td>
<td >
<InputMask className="form-control" type="text"/>
</td>
<td>
<InputMask className="form-control somatorio" maskchar="0" mask="99:99" type="text"/>
</td>
</tr>
)}
Button that should add an item to the array, so that it is rendered another tr
<button type="button" onClick={this.insereRow} className="btn btn-primary"><i className="glyphicon glyphicon-plus"></i> Atividades
</button>
However do this error on this.setState line = this is Undefined
Nothing better than the documentation, but your question is not clear, what problem are you facing? Have you tried something ? Enter the code so we can help you. See on documentation how to render the HTML.
– NoobSaibot
But you just want to add this
tr
? Are you sure you don’t want to add another one. If you just want to add one, then I already answered your question– Alex
I would like to add other yes @Marcelorafael
– Thiago Souza
These TRS, they will all be the same or will change as you click ?
– Alex
All the same, @Marcelorafael. I will update the question with my new results. I did it in a different way
– Thiago Souza