Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





Exercice:Props

Créer une application en React permettant de:
  1. Afficher une liste de client dan la component C1
  2. Une fois un client est cliqué on doit le supprimer de la component C1 et l'envoyé à la component C2

La component C1 Exercice1Props_C1.js

import React,{Component} from "react";
import Exercice1Props_C2 from "./Exercice1Propsc2";
class Exercice1Props_C1 extends Component{
constructor(props)
{
    super(props)

    this.state={
        listeClient: ['client1','client2','client3'],
        ListesclientsEnvoyer:[]
    }
}
sendtoChild=(client)=>{
   this.setState({
    //supprimer le client cliqué from la liste
listeClient:this.state.listeClient.filter((c)=>c!=client),
   //ajouter le client à la liste à envoyer
ListesclientsEnvoyer:[...this.state.ListesclientsEnvoyer,client]
   })
}

render()
{
    return(<div>
        <div style={{backgroundColor:'cyan'}}>
            <ul>
                {this.state.listeClient.map((client)=>{
                    return(<li onClick={()=>this.sendtoChild(client)}>{client}</li>)
                })}
            </ul>
           
          <br/>
        </div>
        <br/>
        <br/>
        <div style={{backgroundColor:"yellow"}}>
       <Exercice1Props_C2  listeclients={this.state.ListesclientsEnvoyer}/>


       <br/>
       </div>
    </div>)
}

}
export default Exercice1Props_C1

La component C2 Exercice1Props_C2.js

import React,{Component} from "react";

class Exercice1Props_C2 extends Component{
    constructor(props)
    {
        super(props)
    }

    render()
    {
        return (<div>
           
                <ol>
                    {
                this.props.listeclients.map((c)=>{
                    return(<li>{c}</li>)

                })
            }
                </ol>
           
        </div>)
    }
}
export default Exercice1Props_C2

La component App.js


 class App extends React.Component{
  constructor(props)
  {    super(props)

  }

  render(){

  return (
    <div className="app">
     <Exercice1Props_C1 />
    </div>
  );
}
 }
export default App;