Building Enterprise JavaScript Applications

Render components based on state

To be able to display the #registration-success element at the opportune time, we must store the results of our request in our state. Currently, inside our RegistrationForm component, we are only logging the results onto the console:

fetch(request)  .then(response => {    if (response.status === 201) {      return response.text();    } else {      throw new Error('Error creating new user');    }  })  .then(console.log)  .catch(console.log)

Instead, when the server responds with the new user's ID, we store it inside the state under the userId property:

fetch(request)  .then(response => { ... })  .then(userId => this.setState({ userId }))  .catch(console.error)

Also, make sure that you are setting the initial state of the userId to ...