TypeError: Cannot read property 'id' of undefined in react

One of your objects in the database might not have an id or userProfile (or are empty). Also, you don’t have the ternary conditional here, I don’t know if the error’s in the true clause or the false cause they’re both identical but if its in the true clause you might not have a username on the object either.

Thanks for your response.
Can you make it clear more please? Thanks again

  • There’s a ternary conditional in your codePen (but not here). Going through ‘results’, the false clause would execute if ‘result.username’ is not the same as ‘connectedUsername’. But it might also be because either ‘result’ or ‘username’ were empty/non-existent/null for that particular element. In that case its a fair bet your data is not in a shape your expecting it to be, so double check your records in the api and look for any inconsistencies.

  • If all else fails, try renaming ‘result’ to something really unique. I know its lame but weirdly works sometimes :slightly_smiling_face:

Thanks for your response. I tried what you suggested me but not working. Really it is a headache. Because what i said that, I have the component that has similar logic and it is working perfectly. It is here: https://codepen.io/fdfd/pen/MWKJWLQ .
Here I will redirect material id. Just it is working like this “result.material.id”.
The earlier component link is here: https://codepen.io/fdfd/pen/wvMBOjw
If you have time please check them and suggest me what i missed thanks.

You still have not provided a working example. If we do not have the API data it’s a lot harder to debug the code.

If I replace the API with the users endpoint from jsonplaceholder.typicode.com, it seems to work just fine. So it seems likely that you have some issue with your API/data.
https://codesandbox.io/s/peaceful-snow-rjcfg

Thanks for your response. You can see here my Api data: https://jsonformatter.org/fed4ae

Seems to work just fine with the data you posted

May be you didn’t get my problem. The search works fine. My problem is if you see my code here : https://codepen.io/fdfd/pen/wvMBOjw,
there is this code

<a href={"/single-user-profile/" + result.id}  className="btn btn-sm btn-info">
                          <i className="fa fa-eye" aria-hidden="true"></i> Profile
                        </a>

In this link, my goal to redirect my user with its id, then this id find in userProfile object. You can find it this object in the user API that i sent you.
Normally it has to be working like this :

<a href={"/single-user-profile/" + result.userProfile.id}  className="btn btn-sm btn-info">
                          <i className="fa fa-eye" aria-hidden="true"></i> Profile
                        </a>

however it is not redirect (it gives an error)
May be it is clear. If it is not, i will try to explain it again.
Thanks

I was simply using the code from the codepen you posted. Which is the only code you have posted so far that is even remotely close to being complete enough for someone to help you. It did not have any use of a userProfile property.

<a href={"/single-user-profile/" + result.userProfile.id}  className="btn btn-sm btn-info">
  <i className="fa fa-eye" aria-hidden="true"></i> Profile
</a>

^Where is this code in relation to the other code you posted? Or is that how the other code should have been, but for some reason, you changed it?

As for the redirect part. I’m not sure I understand you or how we would possibly be able to test that with the code you have provided.

In the API data you posted the last object does not have a userProfile property so you would get a TypeError when trying to access it. You can try using optional chaining or some other guard against accessing undefined or null values.

href={"/single-user-profile/" + (result.userProfile?.id || result.id)}

Bottom line you are trying to access a property on something that is undefined.

If you want help with this you will have to provide a GitHub with the full code, and if you can’t upload the backend code so it is live, provide enough mock api data so it can be tested.

1 Like

Oh my God, this solved my error. Can you imagine what happen? As you said the last object in my Api has not userProfile property. I didn’t seen it until now. I deleted this user and it works fine. You saved my time.
Thanks a lot

Happy to help.

Is that a question?

But no I can’t really tell you what happened other than some issue with the backend. Apparently you can create a new user with incomplete data resulting in an invalid/incomplete user object.

As well as guarding against accessing undefined/null values on the frontend you also have to make sure the new user is created with the expected data on the backend.