How to reach nested object with data in state?

Question

React

How to correctly display data from state.user with double nesting?
What I mean is that the user object is stored in the state object, which includes several more objects.
When displaying data on the first level of nesting on the page, everything is displayed perfectly

<h2>Name: {this.state.user.name}</h2>
                <p>UserName: {this.state.user.username}</p>

View nesting causes errors Errors
<p>Srtreet : {this.state.user.address.street}</p>

index.js:1 The above error occurred in the <UsersDetails> component:
Cannot read property 'street' of undefined // в state данные присутствуют

The object has the following form


In JavaScript, the view string will successfully display data of any kind of nesting.
console.log(state.user.address.street);

Answer 1

Your object has not yet received data at the time of one of the renders. The fix is ​​simple:

<p>Srtreet: {this.state.user.address && this.state.user.address.street}</p>