React Prop returning Null as it relies on state

Question

Hopefully a simply one.

I make an API call in my component which brings down some account information such as AccountUid, Category etc, i use state to set these.

    useEffect(() => {
    fetch(feed_url, {
      headers: {
        //Headers for avoiding CORS Error and Auth Token in a secure payload
        "Access-Control-Allow-Origin": "*",
        Authorization: process.env.REACT_APP_AUTH_TOKEN,
      },
    })
      //Return JSON if the Response is recieved
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw response;
      })
      //Set the Account Name state to the JSON data recieved
      .then((accountDetails) => {
        setAccountDetails(accountDetails);
        console.log(accountDetails.accounts[0].accountUid);
        console.log(accountDetails.accounts[0].defaultCategory);
      })
      //Log and Error Message if there is an issue in the Request
      .catch((error) => {
        console.error("Error fetching Transaction data: ", error);
      });
  }, [feed_url]);

This Works perfectly well and it Logs the correct values in my .then when testing it.

The issue however is that i want to pass these down as props. But i get an error that they are being returned as null (My default state).. i presume as they're jumping ahead.

    <div className="App">
  <GetAccountName
  accountUID={accountDetails.accounts[0].accountUID}
  defCategory={accountDetails.accounts[0].defaultCategory}
  />
</div>

How do i pass the the 2 details im logging as props?? I've tried setting default state to "" instead of null and just get that it is undefined.

Answer 1

If you dont want to use conditional render in your child component, so you should try optional chaining

<GetAccountName
  accountUID={accountDetails?.accounts?.[0]?.accountUID}
  defCategory={accountDetails?.accounts?.[0]?.defaultCategory}
/>