Rendering Collection of objects stored in state

Rendering Collection of objects stored in state.

import React from 'react';
import ReactDOM from 'react-dom';

class User extends React.Component{
  render(){
    return <p key={this.props.email}>{this.props.name} - {this.props.email}</p>
  }
}
//State managment
class Message extends React.Component{
   usersView=null;
  constructor(props){
    super(props);
    //console.log(this);
    this.state={data:null}
  }
  
 componentWillMount(){
  fetch('https://reqres.in/api/users?page=2')
  .then(response => response.json())
  .then(data =>{
      this.setState(data);
      this.usersView=this.state.data.map((user=><User key={user.email} name={user.first_name} email={user.email}></User>));
      this.forceUpdate();
  });
 }

 

  render(){
    return (
    <div>
      <h1>Email set</h1>
      <div>{this.usersView}</div>
    </div>
    );
  }
}



ReactDOM.render(
  <Message></Message>,
  document.getElementById('root')
);