fetching data with react hook returns undefined on nested obj properties

Question

Im trying to display data that has been fetched. but i cannot seem to display nested objects properties in react. Any ideas? if i log the data i first get a undefined, then the correct data. my guess is that i need to wait for the data to be loaded then display it. but it does work for the title that is not in a nested obj.

function SingleBeneficiary({ match }) {

  const [data, setData] = useState({ data: []});
  const id = match.params.id

  useEffect(() => {
  async function fetchData() {
    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()
    setData(jsonData)
    }
    fetchData();
  }, [])

  return (
 {data.title} // works
{data.address.careOf} // dont work

The data

{ 
  "title":"myTitle",
  "address":{
    "careOf": "my adress"
  }

}

It would be better to use useReducer to manage JavaScript objects or arrays as state, + console the json data before setData, Does it give proper output? — Ajay Ghosh
– Ajay Ghosh, Commented Oct 4, 2019 at 12:12
IF i log the jsonData directly after the fetch it returns the correct data 🤨 — csk87
– csk87, Commented Oct 4, 2019 at 12:30
Before setting state blindly when doing async stuff you should realy check if the component is still mounted the code of useIsMounted is here — HMR
– HMR, Commented Oct 4, 2019 at 15:54

SuleymanSah · Accepted Answer · 2020-02-11 11:33:57Z

3

Can you try like this? I set initial data to null, and in return I check if it is not null. If address can be null, additional null check is required.

function SingleBeneficiary({ match }) {

  const [data, setData] = useState(null);
  const id = match.params.id

  useEffect(() => {
  async function fetchData() {
    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()
    setData(jsonData)
    }
    fetchData();
  }, [])

    return (
      <div>
        {data && (
          <div>
            <p>data.title</p>
            <p>data.address.careOf</p>
          </div>
        )}
      </div>
    );
}

edited Feb 11, 2020 at 11:33

answered Oct 4, 2019 at 12:38

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

csk87 Over a year ago

I dont really understand that syntax? The return ({ dont work

SuleymanSah Over a year ago

@csk87 this technique is called Inline If with Logical && Operator. You can read more about this in reactjs docs. reactjs.org/docs/…

tarzen chugh · Accepted Answer · 2019-10-04 12:30:05Z

2

You should check if address has careOf property before using it because first time data will be undefined and in second render it will have the data after the api call.

{data.address && data.address.careOf}

answered Oct 4, 2019 at 12:30

tarzen chugh

11.4k4 gold badges22 silver badges31 bronze badges

Comments

Effay Park · Accepted Answer · 2021-01-06 11:36:39Z

0

For anyone who is having a similar issue(i.e. fetching data via api and only the first time it runs, it will show the data as undefined but after manual refreshing, it works fine), here is a quick and sketchy addition you might consider alongside with 1. "Inline If with Logical && Operator" method and 2. using useState for checking if the api loading is over. With those three, mine worked.

Try fetching the desired data in the previous page of your app; in this case, add the following lines in any page you'll see before "SingleBeneficiary".

    const response = await fetch(`http://localhost:8081/v1/beneficiary/${id}`);
    const jsonData = await response.json()

Maybe it has to do with npm cache, but not really sure what's going on.

edited Jan 6, 2021 at 11:36

answered Jan 6, 2021 at 11:23

Effay Park

12 bronze badges

Comments

buddemat · Accepted Answer · 2022-10-25 11:14:20Z

0

replace

return (
 {data.title}
{data.address.careOf} 
)

with

return (
 {data?.title}
{data?.address?.careOf} 
)

edited Oct 25, 2022 at 11:14

buddemat

5,33016 gold badges37 silver badges61 bronze badges

answered Oct 21, 2022 at 13:49

sujan

12 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

fetching data with react hook returns undefined on nested obj properties

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related