CODEWITHSUNDEEP
reactjsreact-hooksuse-state
VolksRat71
VolksRat71

Reputation: 125

Initializing nested object in `useState` object

I have a couple of API returns that may or may not return certain values, I am effectively setting all other values except the primaryInfo.address values. I can log these nested values individually. Meaning if there is a value in the API return it will log the value, if not it will return an empty string. I have tried hard coding the nested values as well to no avail, it seems like more of a setState on a nest object issue than the operators that set them, but if I was sure I wouldn't be here 😂

  const [primaryInfo, setPrimaryInfo] = useState({
    first_name:
      finance_info?.primary_borrower?.first_name ||
      primary_contact_ref?.first_name ||
      "",
    last_name:
      finance_info?.primary_borrower?.last_name ||
      primary_contact_ref?.last_name ||
      "",
    email:
      finance_info?.primary_borrower?.email ||
      primary_contact_ref?.email_one ||
      "",
    phone:
      finance_info?.primary_borrower?.phone ||
      primary_contact_ref?.phone_cell ||
      "",
    resides_in_home: finance_info?.primary_borrower?.resides_in_home ?? true,
    address: finance_info?.primary_borrower?.resides_in_home
      ? { ...addressInfo }
      : {
          street_one: finance_info?.primary_borrower?.address?.street_one || "",
          street_two: finance_info?.primary_borrower?.address?.street_two || "",
          city: finance_info?.primary_borrower?.address?.city || "",
          state: finance_info?.primary_borrower?.address?.street_one || "",
          zip: finance_info?.primary_borrower?.address?.street_one || "",
        },
  });

Upvotes: 0

Views: 452

Answers (1)

Omar
Omar

Reputation: 3411

My reccomendation is do all this in the useEffect hook and pass your props down as dependencies.

 const [primaryInfo, setPrimaryInfo] = useState(undefined)

useEffect(() => {
// add all your logic here
const object = {}
if(finance_info?.primary_borrower?.first_name) object.firstName = finance_info.primary_borrower.first_name;
// .
// .
// .
// and so on.
   setPrimaryInfo(object); 
}, [finance_info])


if(!primaryInfo) return <div> Loading... </div>

Upvotes: 2

Related Questions