passing object data from child to parent component without event

Question

I'm trying to pass data from the child component to the parent component without using a button or input event. this is what I did and it returns an error. I search for examples or videos but all the examples are with button or input and I'm not sure if it possible to pass data from child to parent without any trigger

 ParentComponent = () => {
        const [data,setData] = useState({q:'',a:''})
        function showdata(d)=>{setData(q:d,a:d)}
        return(
         <div>
          <h1>{data}</h1>
          <ChildComponent childPropsData={showdata} />
         </div>
        )}
    


ChildComponent = (props) => {
    const [childData,setChildData] = useState({que:'how are you?',ans:'fine!'})
    props.childPropsData = childData;
    }

Can you elaborate on what the error is? It could be that your child component is not using [Pascal Case](https://techterms.com/definition/pascalcase). Also, you can simply pass the 'setData' to the child and use it in the child. — Philip Clark, Jul 26 '22 at 02:03
thanks for the replay, it's not that, I edit now the question for other.. the error is: Cannot assign to read only property 'childPropsData' of object '# — meilook, Jul 26 '22 at 02:23
This error is because you are attempting to assign an object to a function. Try `props.childPropsData(childData);`. Also, your two objects do not have the same structure `{q:'',a:''}` vs `{que:'',ans:''}`. Furthermore, showData(d) should look like so: `showdata(d)=>{setData(q:d.q,a:d.a)}` — Philip Clark, Jul 26 '22 at 02:31
If something feels hard or impossible to do in React then you're probably doing React wrong. In React data flows in one direction, down, in the form of props. If children components need to pass data back up then the parent passes a callback function *down* as a prop for the child to call and pass data up. What is the use case you are trying to solve for here? This has the code smell of an XY-problem, i.e. where you need to solve X but you think Y (*passing object from child to parent*) will solve it but it isn't working so you are asking about Y instead of asking about X. — Drew Reese, Jul 26 '22 at 03:38
in my project, I have 3 components the parent -> the main component the son -> component that holds a checkbox, and if the checkbox is checked so the third component are showing that it is a textarea component. I want to pass the value from the textarea to the main component without any trigger, I succeed to pass from the third component to the second component and save it in the state but when I try to pass the value to the main component its returns the error that I mentioned — meilook, Jul 26 '22 at 12:30

Philip Clark · Answer 1 · 2022-07-26T02:53:15.667

There were a few errors that kept the above code from working.

First, React expects child components to be in Pascal Case.
Second, the object schema between the parent and child data was different, meaning you could not assign one to the other due to said differences.
Third, you can not assign an object to a function instead pass the object as an arg to the function.

- See this code sandbox for an example of how pass data from the child to the parent using useState().

- For more information please refer to this SO thread.

- For a copy-paste code snippet, see below.

 ParentComponent = () => {
        const [data, setData] = useState({ q: "Q", a: "A" });
        return(
         <div>
           <h1>{data.q} <br /> {data.a}</h1>
          <ChildComponent setParentData={setData} />
         </div>
        )}
    


ChildComponent = (props) => {
    const [data, setData] = useState({ q: "How are you?", a: "Amazing!" });
    
    useEffect(() => {
     props.setParentData({q: data.q,a: data.a});
    }, [props, data]);
    
    /// Set data can be used to update the child data
    setData({ q: "What are you?", a: "A programmer!" });
    
   }

I don't want that the data pass from ChildComponent by button onclick function. I wish that the value on the child component pass to the state or global variable in the parent component — meilook, Jul 26 '22 at 02:45
the button click is merely to demonstrate the functionality. The data is retrieved from the child on the window load. Notice the initial state of the parent data is set to `{ q: "Q", a: "A" }`, on load that changes to match the child data of `{ q: "How are you?", a: "Amazing!" }` — Philip Clark, Jul 26 '22 at 02:47

passing object data from child to parent component without event

1 Answers1