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

1

Hello guys,
I use react.js and when I test console.log (result.userProfile),
it responds {id: 1, hobby: "Foot, Coding, gardening"} . I would like the id and then when I did console.log (result.userProfile.id) or console.log (result.userProfile ["id"]), it responds TypeError: Cannot read property 'id' of undefined.
Someone who has a suggestion that I missed. Thank you

2

We’ll need to see your actually code to be able to say very much.

3

Ohh thanks for your response, see it below:

<tbody>
                  {results.map(result => (
                    connectedUsername != result.username ? (
                      <tr key={result.id}>
                      <td>{result.firstName}</td>
                      <td>{result.lastName}</td>
                      <td>{result.city}</td>
                                   {result.user_type.map((res, i) => (
                        <td key={i}>{res.name}</td>
                      ))}  
{console.log("user profile: ", result.userProfile.id)}
                      <td>
                        <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>
                      </td>
                    </tr>
</tbody>

Everything is working except to get it the value of userProfile.id and to redirect it by using “a” tag as you see

5

just it is for test… basically i need this line

<a href={"/single-user-profile/" + result.userProfile.id}  className="btn btn-sm btn-info">
6

Look what is in console.log (result.userProfile) if this is empty so look from where came the result.userProfile etc…

Share whole project in https://codesandbox.io/s/new so maybe ppl can help.

7

As I mentioned above, console.log (result.userProfile) ,
it responds
{id: 1, hobby: "Foot, Coding, gardening" }

8

Need to see the actual code. I’m assuming it’s async by your description. If so, then you’re trying to render stuff that doesn’t exist at the time you attempt to access it. You should render null or a fallback if there is no data, then what you already have there when there is.

2 Likes
9

Yeah it’s like Dan said.

I really can’t fathom a way in which you log the whole object and it’s clearly well-shaped, and then read one property and says it’s undefined. The only way this happens is if by the time you console-out the id of the userProfile, the userProfile OR even the root result is truly undefined; and the reason for this is that when you declare a variable with no initial value it’s automatically set to undefined.

And when React comes to mind, it must be the fact that result or result.userPofile is declared but at the point in time during the execution of your console.log statement the object has not yet come to your app from the remote API you’re calling.

10

@DanCouper and @luishendrix92
I have make it clear if you get me:
I have an api object results and then I iterate with map
results.map(result => { console.log(result)}, see the image below the result value:

image

As you see in the image, I need it the value of an id that is under userProfile.
If you get my point, what is your suggestion?
Thanks both of you

11

You need to post more of the code. What you’ve posted is the return value you want and the API object that the call gets, not the rest of the code that makes the call. It’s difficult to provide help without being able to see what is causing the issue

12 
<a href={"/single-user-profile/" + result.userProfile &&  result.userProfile.id}  className="btn btn-sm btn-info">
14

Thanks for your response, however I got the same error!

15

@camperextraordinaire
Do you have any suggestion or solution please?
Thanks

16

Folks have asked to see more of the code. Without more of the code, you are really just asking people to blindly guess at what might help.

17

Thanks,
is it clear or not? can you suggest something from it? if not, i will try another.

image
image880Ă—731 43.3 KB

18

The request for more of the code came after this post you screenshoted, so it doesn’t look like it was enough…

19

Ok thanks, see my code:

<tbody>
                  {results.map(result => (
                    
                      <tr key={result.id}>
                      <td>{result.firstName}</td>
                      <td>{result.lastName}</td>
                      <td>{result.city}</td>
                                            
                      {/* <td>{el.user_type[0].name}</td> */}
                      {result.user_type.map((res, i) => (
                        <td key={i}>{res.name}</td>
                      ))}
                      
                      <td>
                        <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>
                      </td>
                    </tr>)
})
</tbody>

All is working fine except this line:

<td>
                        <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>
                      </td>

So how from the result value, how can redirect this link?
Thanks

20

You already posted that part. You haven’t posted anything new. Do you have a CodePen with all of your code or a minimal working example?

21

https://codepen.io/fdfd/pen/wvMBOjw

1 Like
22

no solution still!!!