Pode parecer uma pergunta repetida, mas os exemplos que achei estão complicados e precisam de um array pré definido, eu não possuo isso, gostaria de saber qual a forma mais simples de adicionar um elemento ao DOM com React, já sabendo que não é como o jQuery e devo mudar o estado do componente.
Update 1: Estou adicionando código para explicar ao Marcelo melhor o meu problema.
<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>
Bem, eu gostaria de adicionar esse tr
a um tbody
, sempre que o usuário clicar em um button
, mas ao adicionar, ele apaga o conteúdo já existente no tbody
.
Update 2: Mudei a forma como é feito, usando state, segue o código
Componente
constructor(props) {
super(props);
this.state = {
rows: []
};
}
insereRow() {
this.setState(prevState => ({
rows: [...prevState.rows, 'row1']
}))
}
Renderizando no HTML, através do 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>
)}
Botão que deveria adicionar um item no array, para que fosse renderizado outro tr
<button type="button" onClick={this.insereRow} className="btn btn-primary"><i className="glyphicon glyphicon-plus"></i> Atividades
</button>
Entretanto da esse erro na linha do this.setState = this is undefined
tr
? Tem certeza que não vai querer adicionar outro. Se você só quer adicionar um, então eu já respondi sua pergunta