React:Props

 import React, { Component } from 'react';

// Composant enfant
class Welcome extends Component {
	constructor(props)
	{
		super(props)
	}
  render() {
    return <h1>Bienvenue, {this.props.name} !</h1>
  }
}
export default Welcome;

// Composant parent
class App extends Component {
	constructor(props)
	{
		super(props)
	}
  render() {
    return (
      	  
	<div>
        <Welcome name="John" />
        <Welcome name="Jane" />
        <Welcome name="Alice" />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

// Composant enfant
class BookInfo extends Component {
	constructor(props)
	{
		super(props)
	}
  render() {
    return (
      <div>
        <h2>Titre: {this.props.title}</h2>
        <p>Auteur: {this.props.author}</p>
        <p>Année de publication: {this.props.year}</p>
      </div>
    );
  }
}
export default BookInfo;

import React, { Component } from 'react';
 // Composant parent
class BookList extends Component {
	constructor(props)
	{
		super(props)
	}
  render() {
    return (
      <div>
        <h1>Liste de livres</h1>
        <BookInfo title="Harry Potter" author="J.K. Rowling" year="1997" />
        <BookInfo title="To Kill a Mockingbird" author="Harper Lee" year="1960" />
        <BookInfo title="The Great Gatsby" author="F. Scott Fitzgerald" year="1925" />
      </div>
    );
  }
}

export default BookList;

import React, { Component } from 'react';

// Composant enfant pour afficher les informations d'un livre
class BookInfo extends Component {
	constructor(props)
	{
		super(props)
	}
  render() {
    const { title, author, year } = this.props.book;
    return (
      <div>
        <h2>Titre: {title}</h2>
        <p>Auteur: {author}</p>
        <p>Année de publication: {year}</p>
      </div>
    );
  }
}

import React, { Component } from 'react';
// Composant parent pour afficher une liste de livres
class BookList extends Component {
	constructor(props)
	{
		super(props)
	}
  render() {
    const books = [
      { title: "Harry Potter", author: "J.K. Rowling", year: "1997" },
      { title: "To Kill a Mockingbird", author: "Harper Lee", year: "1960" },
      { title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: "1925" }
    ];

    return (
      <div>
        <h1>Liste de livres</h1>
        {books.map((book, index) => (
          <BookInfo key={index} book={book} />
        )}
      </div>
    );
  }
}

export default BookList;

import React from 'react';
  import './App.css';
  import ChildComponent1 from './components/childComponent1'
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
      this.state={
        listeGroupe:['Groupe1','Groupe2','Groupe3']
      }
    }
   
    render()
    {
      return (
        <div>
         <ChildComponent1
         donnees1="bonjour"
         Unclient={{client:{nom:'abc',prenom:'xyz'}}}
         listeGroupe={this.state.listeGroupe}
         />
        </div>

        );
       
      }
   
    }
    export default App;

import React, { Component } from "react";

class ChildComponent1 extends Component {
	constructor(props)
	{
		super(props);
		this.state={
			mesGroupes:this.props.listeGroupe,
			monClient:this.props.Unclient
		}
	}
	render() {
		return 
	<div>
	<table>
		<tr>
			<td>donnees1 From parent:</td>
			<td>{this.props.donnee1}</td>
		</tr>
		<tr>
			<td>mesGroupe From parent:</td>
			<td>
				<ol>
					{
						this.state.mesGroupes.map((g)=>{
						return <li>{g}</li>	})
					}
				</ol>
			</td>
		</tr>
		<tr>
		<td>Client From parent</td>
		<td><ul>
			Nom:{
			this.state.monClient.client.nom
				}
		<br/>
			Prnéom:{
			this.state.monClient.client.prenom
				}
			</ul>
		</td>
	</tr>

</table>
</div>;
	}
}

export default ChildComponent1;