React:Propos

folder Projet: test_react_project
Props :permet à une componenet parent d’envoyer des données à une component child

Parent est la component qui import une autre component(child)

Exemple

App.js

  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;
npx crcf components/childComponent1

childComponent1.js

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;

Exemple 2

App.js

  import React from 'react';
  import './App.css';
  import ChildComponent1 from './components/childComponent1'
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
      this.state={
        input:''
      }
    }
   
    changeValue=(e)=>{
    this.setState({
      input:e.target.value
    })
    }
    render()
    {
      return (
        <div>
          <input type="text" onChange={this.changeValue} />
         <ChildComponent1  valeurInput={this.state.input}   />
        </div>

        );
       
      }
   
    }
    export default App;

ChildComponent1.js

import React, { Component } from "react";

class ChildComponent1 extends Component {
  constructor(props)
  {
    super(props)
 
  }
  render() {
    return(
     <div>
     Valeur From parent: {this.props.valeurInput}
    </div>
    );
  }
}

export default ChildComponent1;

Exemple 3 :Envoyer les données from Child to Parent

2.Child-->Parent :CallbackEvent:La component parent peut appeler et retourner la valeur d'une fonction du Child

App.js

  import React from 'react';
  import './App.css';
  import ChildComponent1 from './components/childComponent1'
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
      this.state={
        input:''
      }
    }
   
    changeValue=(v)=>{
    this.setState({
      input:v
    })
    }
    render()
    {
      return (
        <div>
          <p>Valeur From Child:{this.state.input}</p>
         <ChildComponent1  fonctionParent={this.changeValue}   />
        </div>

        );
       
      }
   
    }
    export default App;

ChildComponent1.js

import React, { Component } from "react";

class ChildComponent1 extends Component {
  constructor(props)
  {
    super(props)
 
  }
  sendToParent=(e)=>{
    this.props.fonctionParent(e.target.value)
  }
  render() {
    return(
     <div>
     <input type="text" onChange={this.sendToParent} />
    </div>
    );
  }
}

export default ChildComponent1;





Exemple 4

Envoyer un tableau d'objet à la component Test.js puis les afficher


App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navigation from './components/navigation/navigation.js'
/*importer la component Test pour l'afficher */
import Test from './components/Test/Test.js'
/*importer les composantes bootstrap utilisé dans App*/
import {Container} from 'react-bootstrap';


function App() {
/* un tableau d'objet à envoyer à la component Test */
const produits = [
{id: '1',nom: 'produit1',qteStock:40,prix:47.5},
{id: '2',nom: 'produit2',qteStock:10,prix:12},
{id: '3',nom: 'produit3',qteStock:80,prix:43}
]
return (
<div>
{/*appler la navigation */}
<Navigation />
{/*appler Test dans le container (boostrap class)*/ }
<Container fluid>
{/*donneesRecu:est un props de la component Test*/}
<Test donneesRecu={produits} />
</Container>
</div>
);
}

export default App;

Test.js :Récupérer les données reçues avec props puis les afficher avec Array.map()
import React, { Component } from "react";
import {Table} from 'react-bootstrap';

class Test extends Component {
render() {
/*récupérer les données reçues du props */
const { donneesRecu } = this.props

return (
<div>
<h3>Liste des données envoyées par le parent (App.js) avec props</h3>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Nom</th>
<th>qteStock</th>
<th>prix</th>
</tr>
</thead>
<tbody>
{donneesRecu.map(p=>(
<tr>
<td>{p.id}</td>
<td>{p.nom}</td>
<td>{p.qteStock}</td>
<td>{p.prix}</td>
</tr>
))}
</tbody>
</Table>
</div>)
;
}
}

export default Test;

Utilisation du pattern ...props

Permet de passer des données via du props sans passé par des variables:
App.js
/*importer les styles boostrap*/
import 'bootstrap/dist/css/bootstrap.min.css';
import SendMessage from './components/sendMessage/sendMessage.js';

function App() {
/*Créer une données à envoyer */
const infoClients = {
client:{
nom: "Magi ",
email: "magi@fixwins.com",
tel: "044546"
}
};
return (
<div className="container">
<br/>
<div className="card text-success mb-3">
<div className="card-header card bg-warning">Hi i am APP the parent </div>
<div className="card-body">
je envoie des infoClient à ma child
</div>
</div>


<SendMessage {...infoClients} />
</div>
);
}
export default App;

npx crcf components/sendMessage
import React from 'react';

function SendMessage(props) {
return (
<div className="card text-success card bg-light mb-3">
<div className="card-header">Je suis Child de APP</div>
<div className="card-body">
<ul class="list-group">
<li class="list-group-item">Nom :<b>{props.client.nom}</b></li>
<li class="list-group-item">email :<b>{props.client.email}</b></li>
<li class="list-group-item">tel :<b>{props.client.tel}</b></li>

</ul>

</div>
</div>
)
}
export default SendMessage;