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 null in the class' constructor:

constructor(props) {
  super(props);
  this.state = {
    userId: null,
    ...
  };
}

Then, in our render method, check whether the userId state is truthy, and if so, display an element with an ID of registration-success instead of the form:

render() {
  if(this.state.userId) {
    return <div id="registration-success">You have registered successfully</div>
  }
  ...
}

Run our tests again, and they should, once again, pass!