Este site usa cookies para garantir que você obtenha a melhor experiência.

#Compartilhe

Existem várias formas de se trabalhar com componentes React, passando propriedades de um lado para o outro, que vai das formas mais simples até as mais complexas. Existem também várias formas de um componente pai acessar valores do componente filho, isso é o que iremos mostrar hoje.

Bom, vamos iniciar, primeiro vou criar um projeto React padrão com create-react-app.

yarn create react-app son-to-father

ou

npx create-react-app son-to-father

Para simplificar o nosso exemplo, deixei o projeto React o mais simples possível, removi tudo, deixei apenas os arquivos src/index.js, src/App.js e criei um componente em src/components/Select.js.

Este é o arquivo src/App.js atual.

# src/App.js

import { Select } from './components/Select';

function App() {
 return (
   <>
     <Select />
   </>
 );
}

export default App;

Em seguida deixei o arquivo src/components/Select.js da seguinte forma.

# src/components/Select.js

const techs = ['ReactJS', 'NextJS', 'NodeJS', 'TypeScript'];

function Select(){
 return (
   <select name="select" value="" >
     <option value="">Selecione uma tecnologia</option>
     {techs.map(tech => (
       <option key={tech} value={tech}>{tech}</option>
     ))}
   </select>
 );
}

export default Select

Observe que até o momento não está acontecendo nada demais em ambos os arquivos. Agora vamos iniciar a lógica para recuperar as informações do componente filho src/components/Select.js através do componente pai src/App.js.

Note: Estamos usando um array de string como dados de exemplo.

const techs = ['ReactJS', 'NextJS', 'NodeJS', 'TypeScript'];

No componente pai importei useState e declarei as constantes father, setFather.

Em seguida vou passar as propriedades setProps que vai receber a função setFather e value que recebe father, para dentro do componente Select.

# src/App.js

import { useState } from 'react';
import Select from './components/Select';

function App() {
 const [father, setFather] = useState('');

 return (
   <>
     <h1>{father}</h1>

     <Select setProps={setFather} value={father} />
   </>
 );
}

export default App;

Agora vamos trabalhar dentro do componente Select em src/components/Select.js.

Primeiro precisamos receber a propriedade setProps e value, que foram passadas.

# src/components/Select.js

const techs = ['ReactJS', 'NextJS', 'NodeJS', 'TypeScript'];

function Select({ setProps, value }){
 return (
   <select name="select" value={value} onChange={(e) => setProps(e.target.value)} >
     <option value="">Selecione uma tecnologia</option>
     {techs.map(tech => (
       <option key={tech} value={tech}>{tech}</option>
     ))}
   </select>
 );
}

export default Select

Em seguida inserimos dentro da tag select, as seguintes propriedades value={value} onChange={(e) => setProps(e.target.value)}.

Pronto, a partir deste momento o componente pai é capaz de acesssar o valor selecionado no componente filho.

Conclusão

Existem outras formas de recuperar valores do componente filho, como exemplo, fazendo uso da ContextAPI do React, como a ideia deste artigo é simplificar o entendimento das coisas, vamos deixar os ContextAPI para outro momento.

Você curtiu este artigo, ficou com alguma dúvida, conhece alguma forma de recuperar esses valores? Deixe nos comentários, ele pode agregar muito conhecimento para novos desenvolvedores.


#Compartilhe