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 teams 

folder Projet: test_react_project
Créer une application qui permet de filter la liste des matchs selon une date séléctionnée

ListeMatches .js

import React, { Component, useState } from "react";

export default function ListeMatches () {
 const [matchaffiches,setMatchaffiches]=useState([{equipe1:'',equipe2:''}])
  const data=[
    {equipe1:'barca',equipe2:'real',datematch:'25-12-2020'},
    {equipe1:'raja',equipe2:'wydad',datematch:'22-12-2020'},
    {equipe1:'fes',equipe2:'tanger',datematch:'22-12-2020'}
  ]
 
  //récupéer les
  const uniqueDate=[];
  const lesdates=[];
    data.map(a=>{
    lesdates.push(a.datematch)
  });
  //supprimer les doublants
  for(let i=0;i<lesdates.length;i++){
    if(!uniqueDate.includes(lesdates[i]))
    {
      uniqueDate.push(lesdates[i])
    }
  }

  const changer=(e)=>{
 
 setMatchaffiches(
  data.filter(s=>(s.datematch==e.target.value))
 )
  }
  return (
    <div>
      <table>
        <tr>
          <td>Veuillez Sélectionner une date</td>
          <td>
            <select onChange={changer}>
              {uniqueDate.map(ligne=>{
                return (
                  <option>{ligne}</option>
                )
              })}
            </select>
            </td>
        </tr>
      </table>
     
      <table>
        <thead style={{background:'#777'}}>
          <th>Equipe1</th>
          <th>Equipe2</th>
         
        </thead>
        <tbody>
          {matchaffiches.map(m=>{
            return <tr style={{width:'100%'}}>
              <td>{m.equipe1}</td>
              <td>{m.equipe2}</td>
            </tr>
          })}
        </tbody>
      </table>
    </div>
  )
}