Passing data/variables from parent to child in ReactJS Hooks

Question

i am looking to pass the json data that i received using the fetch API and use in the Useraccount component.

i have looked around and i can find a lot of material related to passing from child to parent and very few that mention from parent to child.

I have tried using this userinfo={credentailverify} and clearly it is not working for me, any suggestions please

Update3: i have upload the small clip for the issue that i am facing for better understanding. i have tried to make the code very simple but still cant understand the reason why loginscreen is showing before showing the user account information. youtube link showing issue

import Useraccount from "./Useraccount";
function Signin({ userinfo1, userinfo2 }) {
//userinfo1 is having customer account information
//userinfo2 is Boolean and showing if user is looged in or not if not then go to login page
 
return (
<div>
{userinfo2 ? (
<Useraccount userinfo={userinfo1} />
      ) : (
<SigninOptions />
      )}
    </div>
  );
}
export default Signin;

Update2: i am also experience one strange thing as when i set setUserinfo and pass the new state into the child it does show the new state in child component there but here in main code if i try to console the userinfonew after its set it is showing me the initial state as empty array, is it some thing i am missing here!!

 .then((data) => {
            
        setUserinfo(data.data)   
        console.log(userinfonew)     
      }

-Note i can see if i run console.log(userinfonew) outside the Async function then it does show the updated status but not inside the async function, although i am updating the status inside the Async function. cant understand the reason behind it

Update1: initial problem is solved thanks and i have updated the code, now the only issue i am facing is the condition that i am using in the return statement is both getting executed i.e first for few seconds < SigninOptions /> component and then the correct one as per the logic < Useraccount userinfo={userinfonew} /> component not sure if there is a delay somewhere or code is runnig twice

function Signin() {
  const [siginalready, setifsignedin] = useState(false);
  const [userinfonew, setUserinfo] = useState([]);

  useEffect(() => {
    credentailverify();
  }, []);

  let url = "http://localhost:5000/api/verifyifloginalready";

  let options = {
    credentials: "include",
    method: "POST",
  };

  let verifyifloginalready = new Request(url, options);

  let credentailverify = async () => {
    
    const x1 = await fetch(verifyifloginalready)
      .then((res) => {
        if (res.status == 400 || res.status == 401) {
          
          return setifsignedin(false);
        } else {
          setifsignedin(true);

          return  res.json();
          
        }
      }).then((data)=> 

      {
     // here the console is shoewing empty array
        setUserinfo(data.data)
        console.log(userinfonew)     

    })
      .catch((err) => console.log("err"));
    return x1;
  };


  return (
    <div>
// here first <SigninOptions /> renders for a SECOND and then <Useraccount userinfo={userinfonew} />
      {siginalready ? (
        <Useraccount userinfo={userinfonew} />
      ) : (
        <SigninOptions />
      )}
    </div>
  );

}
export default Signin;

the below is the code at the user account,

    import React, { useState, useEffect } from "react";
    import "../App.css";
    
    function Useraccount({ userinfo }) {

    return <div>{ `The user email address is ${userinfo}`}</div>;
    }

export default Useraccount;

and after the data is passed to the child component how can i use it, i have seen one place mentioned to use as this.props.userinfo but i am using React Hook so cant use this method to access.

Thanks in advance.

Answer 1

My recommendation is to track the response of your response in the state, then pass that state value into the child component.

It can be helpful to think of an effect as happening in a different execution than your main code. Any data inside of there can only be communicated to your component through the functions that you pass in as the effect dependencies.

Answer 2

You need to access the props passed to child:

function Useraccount({ userinfo }) {
    if (!userInfo) return <div />
    return <div>{`The user email address is ${userinfo}`}</div>;
}

Also use a template string like I did above