É possivel eu utilizar uma função do componente pai que atualiza o estado desse mesmo componente em OUTRO componente? (esta função possui um parâmetro que seria o novo valor a ser atualizado) Esta é a função que quero utilizar no componente filho function atualizarCadastros(novoCadastro){ setCadastros(cadastrosAtuais => { return[...cadastrosAtuais, novoCadastro] }) } Componente pai: 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" }]) function atualizarCadastros(novoCadastro){ setCadastros(cadastrosAtuais => { return[...cadastrosAtuais, novoCadastro] }) } 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 filho em questão: 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 E segue o outro componente que compõe a aplicação apenas para completar o código: 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 Continue reading...