[ReactJS]

Iniciando no ramo do React, possuo uma tabela que é criada a partir de um array.map do useState do componente principal, e um componente que cria formulários.

Pretendo que ao clicar no botão cadastrar, os valores do formulários criem um novo objeto e este objeto seja inserido no useState do componente principal.

Estou tentando de algumas formas, porém acredito que há algo errado com minha disposição dos componentes, já que através do componente de formulário por exemplo eu não conseguirei atualizar estado do componente principal.

Acredito que esta é uma duvida que também irá ajudar ao criar a funcionalidade de remover um objeto do estado.

Agradeço pelas dicas desde já.

Componente principal a seguir:
​

import './App.css';
import React, {useState} from 'react';
import {Table, Jumbotron, Button} from 'react-bootstrap'
import Formulario from './Formulario'
import renderCadastros from './renderCadastros'

function App() {

const [Cadastros, setCadastros] = useState([{
"id": 1,
"nome": "Francisca Julia da Costa",
"cpf": "457.696.936-65",
"rg": "47.360.897-2",
"data_nasc": "23/03/1944",
"sexo": "Feminino"
},
{
"id": 2,
"nome": "Noah Felipe Silva",
"cpf": "956.531.431-70",
"rg": "40.974.782-8",
"data_nasc": "11/07/1964",
"sexo": "Masculino"
},
{
"id": 3,
"nome": "Alícia Rosângela Melo",
"cpf": "066.291.353-18",
"rg": "36.214.141-1",
"data_nasc": "18/02/1978",
"sexo": "Feminino"
}])

return (

<Jumbotron style={{background: 'transparent'}}>

<Formulario/>

<Table striped bordered hover size='sm'>
<thead>
<tr>
<th>id</th>
<th>Nome</th>
<th>CPF</th>
<th>RG</th>
<th>Nascimento</th>
<th>Sexo</th>
<th></th>
</tr>
</thead>
<tbody>
{Cadastros.map(renderCadastros)}
</tbody>
</Table>

</Jumbotron>

);
}

export default App;

Componente que representa a renderização da tabela com o array.map:
​

import './App.css';
import React from 'react';
import {Button} from 'react-bootstrap'

function renderCadastros(cadastro, index){
return(
<tr id={cadastro.id} key={index}>
<td>{cadastro.id}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.nome}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.cpf}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.rg}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.data_nasc}</td>
<td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.sexo}</td>
<td align="center"><Button variant="danger">Excluir</Button></td>
</tr>)
}

export default renderCadastros

Componente responsável pela criação dos formulários:
​

import './App.css';
import React, {useRef} from 'react';
import {Button, Form, Col} from 'react-bootstrap'

function Formulario (){

return(
<div>
<Form>
<Form.Row>
<Col>
<Form.Label>Identificação</Form.Label>
<Form.Control placeholder="Id" />
</Col>
<Col>
<Form.Label>Nome Completo</Form.Label>
<Form.Control placeholder="João Silva" />
</Col>
<Col>
<Form.Label>CPF</Form.Label>
<Form.Control placeholder="000.000.000-00" />
</Col>
<Col>
<Form.Label>RG</Form.Label>
<Form.Control placeholder="0.000.000" />
</Col>
<Col>
<Form.Label>Data de Nascimento</Form.Label>
<Form.Control placeholder="DD/MM/AAAA" />
</Col>
<Col>
<Form.Label>Sexo</Form.Label>
<Form.Control placeholder="Masculino/Feminino" />
</Col>
</Form.Row>
</Form>
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Button style={{margin: '10px'}} variant="primary">Cadastrar</Button>
</div>
</div>
)
}

export default Formulario

Continue reading...