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:Filter Array

folder Projet: test_react_project
Créer une application qui permet de filter les données d'un tableau d'objet

App.js

import React from 'react';
import './App.css';
class App extends React.Component{
  constructor(props)
  {
    super(props);
    //les données
    this.etudiants=[
      {
        nom:"a",
        prenom:"b",
        groupe:"Groupe1"
      },
      {
        nom:"aa",
        prenom:"bb",
        groupe:"Groupe2"
      },
      {
        nom:"aaa",
        prenom:"bbb",
        groupe:"Groupe1"
      }
    ]
   
   
    this.state={
      listeEtudiants:this.etudiants
    }
  }
 
  leFilter=(e)=>{
    let monGroupe=e.target.value;
   
    this.setState(
      {
        listeEtudiants:this.etudiants.filter(etudiant=>(etudiant.groupe==monGroupe))
      }
      )
    }
    render()
    {
      return (
        <div>
       
        <fieldset>
        <legend>Filter Array Examples</legend>
        <table style={{background:"#ddd"}}>
        <tr>
        <td>Veuillez Sélectionner un Groupe</td>
        <td>
        <select onChange={this.leFilter} style={{width:'100%'}}>
        {
          this.etudiants.map((e)=>{
            return <option value={e.groupe}>
            {e.groupe}
            </option>
          })
        }
        </select>
        </td>
        </tr>
        </table>
        <table>
        <thead style={{background:'#aaa'}}>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Groupe</th>
        </thead>
        <tbody>
        {
          this.state.listeEtudiants.map((e)=>{
            return <tr>
            <td style={{border:'1px solid #000'}}>{e.nom}</td>
            <td style={{border:'1px solid #000'}}>{e.prenom}</td>
            <td style={{border:'1px solid #000'}}>{e.groupe}</td>
            </tr>
          })
        }
        </tbody>
        </table>
        </fieldset>
        </div>
       
        );
       
      }
     
    }
    export default App;