How to use the state of the child component in the parent component?

Question

I need to use state value that is inside child component in parent component.

The component:

export default function Children(props) {

    const [data,setData] = useState('')

     const handleChange = (e) =>{
        e.preventDefault();
        setData({[e.target.name]:e.target.value});

     }
    return(
        <Component onChange={handleChange} name={props.name} label={props.name} variant="outlined" />
    );
};

and this is the parent component:

export default function Parent(){

    return(
        <div>
        <TextArea name="One"/>
        <TextArea name="Two"/>
        <TextArea name="Three"/>
        </div>
);}

i just need to read the state of the child component in the parent component — Vinicius Otacilio, Jan 13 '20 at 04:51
@Vinicius your question need more clarification. please edit your post and put more information — akhtarvahid, Jan 13 '20 at 04:54
Sounds like a duplicate: https://stackoverflow.com/a/27875018/8333026 Basically, pass a callback to the child as a prop. — Drazail, Jan 13 '20 at 05:07

score 3 · Accepted Answer · answered Jan 13 '20 at 04:57

You can have state and onChange handler in parent component only.

export default function Splitter(){
    const [data,setData] = useState('')

    const handleChange = (name, value) =>{
        setData({[name]:value});
     }
    return(
        <div>
        <TextArea name="Nome" handleChange={handleChange}/> //Pass the change handler here
        <TextArea name="Test" handleChange={handleChange}/>
        <TextArea name="Local" handleChange={handleChange}/>
        </div>
);}

In child component call the function from parent component,

export default function TextArea(props) {

     const handleChange = (e) =>{
        props.handleChange(e.target.name, e.target.value)
     }

    return(
        <CssTextArea onChange={handleChange} name={props.name} label={props.name} variant="outlined" />
    );
};

score 0 · Answer 2 · answered Jan 13 '20 at 05:07

Are you looking something like this?

import React from "react";
import "./styles.css";

const Comp1 = () => <h2>Component One</h2>;
const Comp2 = () => <h2>Component Two</h2>;
const Comp3 = () => <h2>Component Three</h2>;

export default function TextArea(props) {
  const [data, setData] = React.useState("");

  const handleChange = e => {
    e.preventDefault();
    setData(e.target.value);
  };
  console.log(data);
  return (
    <>
      <h3>Please select to show Component</h3>
      <CssTextArea
        onChange={handleChange}
        name={props.name}
        label={props.name}
        variant="outlined"
      />
      {data === "One" && <Comp1 />}
      {data === "Two" && <Comp2 />}
      {data === "Three" && <Comp3 />}
    </>
  );
}
const CssTextArea = ({ onChange }) => {
  let arr = ["One", "Two", "Three"];
  return (
    <select onChange={onChange}>
      <option value="">Select</option>
      {arr.map(a => (
        <option value={a} key={a}>
          {a}
        </option>
      ))}
    </select>
  );
};

Live Demo

How to use the state of the child component in the parent component?

2 Answers2