Cacher is the code snippet organizer for pro developers

 import React, { Component } from 'react'
 import Header from './components/Header';
 import 'bulma/css/bulma.css';
 import './App.css';
  
 export default class App extends Component {
  state = {
    users: [
      {
        id: 1,
        nom: 'Durant',
        prenom: 'Paul'
      },
      {
        id: 2,
        nom: 'Dupont',
        prenom: 'Albert'
      },
      {
        id: 3,
        nom: 'Marty',
        prenom: 'Edgard'
      }
    ],
    titre: "Liste des utilisateurs"
  }
  /*
  Ajout d'un utilisateur avec setState
  */
  addUser = () => {
    const tabUsers = this.state.users;
    tabUsers.push({ id: 4, nom: 'Gate', prenom: 'Bill' });
    this.setState(tabUsers);
  }

  
  render() {
    return (
      <div>
        <Header titre={this.state.titre} listUsers={this.state.users} />
        <button onClick={this.addUser}>Ajouter un utilisateurs</button>
      </div>

  
    );
  }
 }
 

// ./components/Header.jsx
  import React, { Component } from 'react'

 export default class Header extends Component {
    render() {
        return (
            <div>
                <div className="box">{this.props.titre}</div>
                <div className="list">{
                    this.props.listUsers.map((user) => (
                        <p key={user.id} className="list-item">{user.nom} {user.prenom} </p>
                    )
                    )
                }</div>
            </div>  
        );
    }
 }