Estou desenvolvendo uma aplicação com o React com Hooks e componentes funcionais, e me deparei com a seguinte logica: eu preciso renderizar em tela dos componentes funcionais, ambos com arrays de forms dentro do componente principal, em vez de eu mandar as informações para minha API dentro de cada componente achei mais pratico os componentes filhos passarem os arrays para o componente pai e o mesmo mandar uma vez, então pensei em passar como props uma função que seta o array num estado do componente pai, porem toda vez que tento acessar essa função a partir do componente filho da um erro.
Componente pai:
function Config(){
const [registerData, setRegisterData] = useState([])
const [deleteData, setDeleteData] = useState(null)
function setRegister(dados){
setRegisterData(dados)
}
function setDelete(dados){
setDeleteData(dados)
}
console.log(registerData, deleteData)
return(
<div>
<Register data={setRegister} />
<br />
<Delete data={setDelete} />
</div>
)
}
export default Config;
Componente filho:
function Register({props}){
const [usuario, setUsuario] = useState('')
const [telefone, setTelefone] = useState('')
const [unidade, setUnidade] = useState('')
const [departamento, setDepartamento] = useState('')
const [cargo, setCargo] = useState('')
const form = {usuario: usuario, telefone: telefone, unidade: unidade, departamento: departamento, cargo: cargo}
props.setRegister(form);
return(
<div className="app">
<center>
<input type="text" onChange={(e) => setUsuario(e.target.value)} className="form-input" placeholder="Usuário" />
<br />
<br />
<input type="text" onChange={(e) => setTelefone(e.target.value)} className="form-input" placeholder="Telefone" />
<br />
<br />
<select>
<option onChange={(e) => setUnidade(e.target.value)}>Selecione uma unidade</option>
<option value="UB">UB</option>
<option value="UG">UG</option>
<option value="UM">UM</option>
<option value="UP">UP</option>
<option value="UV">UV</option>
<option value="UL">UL</option>
</select>
<br />
<br />
<input type="text" onChange={(e) => setDepartamento(e.target.value)} className="form-input" placeholder="Departamento" />
<br />
<br />
<input type="text" onChange={(e) => setCargo(e.target.value)} className="form-input" placeholder="Cargo" />
<br /><br />
<br /><br />
<button className="btn btn-lg btn-dark">Cadastrar</button>
</center>
</div>
)
}
export default Register;
O erro que acontece:
TypeError: Cannot read property 'setRegister' of undefined
Register({props})
irá receber uma props com o nomeprops
(ou seja,props.props
); 2)setRegister
não é o nome da props, mas simdata
(o que é um nome ruim, dá uma arrumada nisso pra ficar mais fácil de ler e entender o que significa)