How to receive data through props React and send it back?

Question

I'm getting a placeholder value through props in my input component and I need to send the input value back to the main class. I'm using React but I'm not getting it. Follow my code.... The value I need to send is the value of 'usuario'

import React, { useState } from 'react';
import { EntradaDados } from './styled';


const PesqDados = ({placeholder, usuario}) => {

const [usuario, SetUsuario] = useState('')

const setValor =(e)=>{
    SetUsuario(e.target.value);
}
console.log(usuario);

    return(
        <EntradaDados 
            onChange={setValor}
            placeholder={placeholder}
            >
        </EntradaDados>
 );
}

export default PesqDados;

Does this answer your question? [React Hook : Send data from child to parent component](https://stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component) — Slbox, Jul 15 '22 at 22:22

Danziger · Answer 1 · 2022-07-15T22:20:35.563

You need to add a callback prop (onUsuarioChange) to your PesqDados component and call it with the new usuario. You have two options:

Call it from a useEffect with usuario as dependency (assuming usuario could get updated from somewhere other than setValor.
Call it from setValor, assuming that's the only place where usuario is going to get updated from.

This is how this should look:

import React, { useState } from 'react';
import { EntradaDados } from './styled';

const PesqDados = ({
  placeholder,
  usuario,
  onUsuarioChange
}) => {

  const [usuario, setUsuario] = useState('');

  // Option 1:
  useEffect(() => {
    onUsuarioChange(usuario);
  }, [usuario]);

  const setValor = (e) => {
    const nextUsuario = e.target.value;

    setUsuario(nextUsuario);

    // Option 2:
    onUsuarioChange(nextUsuario);
  };

  return (
    <EntradaDados 
      onChange={ setValor }
      placeholder={ placeholder } />
  );
}

export default PesqDados;

score 0 · Answer 2 · answered Jul 18 '22 at 12:26

After studying properly, I found that I don't need to implement the function in the component page. I just needed to create a hook that calls the component's OnChange property on the component's page and then create a function just in the place where the component is installed. In this case, App.js.

Page Component....

const PesqDados = ({placeholder, Dados}) => {

    return(
        <EntradaDados 
            onChange={Dados}
            placeholder={placeholder}
            >
        </EntradaDados>
 );
}

export default PesqDados;

Page App.js

function App() {

  
  const [usuario, SetUsuario] = useState('Aguardando Dados...')
  
  const setValor =(e)=>{
    SetUsuario(e.target.value);
  }  
  
  const teste = ()=>{
    alert("O usuário digitado foi : "+usuario)
  };
  


  return (
    <>
      <div className='divRepos'>

          <div className='bloco'>
            <div className='pesquisar'>                        
              <p>{usuario}</p>
              <PesqDados 
               placeholder={"Digite um username válido"} 
               Dados={setValor}
              />
              
              <Button nomeBotao={"Pesquisar Perfil"}
                      onClick={teste}/>
            </div>
...

How to receive data through props React and send it back?

2 Answers2