Pretendo dentro do meu componente pai criar uma função que irá percorrer todos os objetos armazenados no estado deste mesmo componente, verificando se o parâmetro indicado é igual ao valor id
do objeto.
No meu componente filho pretendo usar essa função do componente pai indicando um valor como parâmetro e, no caso desse parâmetro se igualar ao valor id
, retornar true
.
Este valor booleano será usado dentro de um if
neste componente filho.
A função que tentei criar no componente pai:
function validarId(novaId){
Cadastros.map(cadastro => () => {
if(cadastro.id == novaId){
return true
} else {
return false
}
})
}
Tentativa de implementar a função dentro de uma condicional:
else if(validarId(id)){
window.alert("Id já cadastrada!")
}
Aplicação completa:
Componente Pai:
import './App.css';
import React, {useState} from 'react';
import {Table, Jumbotron} 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.concat(novoCadastro)
})
}
function validarId(novaId){
Cadastros.map(cadastro => () => {
if(cadastro.id == novaId){
return true
}
else {
return false
}
})
}
return (
<Jumbotron style={{background: 'transparent'}}>
<Formulario validarId={validarId} atualizarCadastros={atualizarCadastros} />
<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:
import './App.css';
import React, {useRef} from 'react';
import {Button, Form, Col} from 'react-bootstrap'
function Formulario ({atualizarCadastros, validarId}){
const refId = useRef()
const refNome = useRef()
const refCpf = useRef()
const refRg = useRef()
const refNascimento = useRef()
const refSexo = useRef()
function registrarCadastros(){
const id = refId.current.value
const nome = refNome.current.value
const cpf = refCpf.current.value
const rg = refRg.current.value
const nascimento = refNascimento.current.value
const sexo = refSexo.current.value
const novoCadastro = {'id': id, 'nome': nome, 'cpf': cpf, 'rg': rg, 'data_nasc': nascimento, 'sexo': sexo}
if(id == '' || nome == '' || cpf == '' || rg == '' || nascimento == '' || sexo == '' ){
window.alert("Existem campos em branco!")
}
else if(validarId(id)){
window.alert("Id já cadastrada!")
}
else{
atualizarCadastros(novoCadastro)
refId.current.value = null
refNome.current.value = null
refCpf.current.value = null
refRg.current.value = null
refNascimento.current.value = null
refSexo.current.value = null
}
}
return(
<div>
<Form>
<Form.Row>
<Col>
<Form.Label>Identificação</Form.Label>
<Form.Control ref={refId} placeholder="Id" />
</Col>
<Col>
<Form.Label>Nome Completo</Form.Label>
<Form.Control ref={refNome} placeholder="João Silva" />
</Col>
<Col>
<Form.Label>CPF</Form.Label>
<Form.Control ref={refCpf} placeholder="000.000.000-00" />
</Col>
<Col>
<Form.Label>RG</Form.Label>
<Form.Control ref={refRg} placeholder="0.000.000" />
</Col>
<Col>
<Form.Label>Data de Nascimento</Form.Label>
<Form.Control ref={refNascimento} placeholder="DD/MM/AAAA" />
</Col>
<Col>
<Form.Label>Sexo</Form.Label>
<Form.Control ref={refSexo} placeholder="Masculino/Feminino" />
</Col>
</Form.Row>
</Form>
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Button onClick={registrarCadastros} style={{margin: '10px'}} variant="primary">Cadastrar</Button>
</div>
</div>
)
}
export default Formulario
Outro componente da aplicação:
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