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"
  }
  
  render() {
    return (
      <div>
        <Header titre={this.state.titre} listUsers={this.state.users} />
      </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>
        );  
    }
 }