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





React:Passage données Child vers parent

folder Projet: test_react_project
1.Parent-->Child: Props :permet à une componenet parent d’envoyer des données à une component fille : voir les propos
2.Child-->Parent :CallbackEvnet:La component parent peut appeler et retourner la valeur d'une fonction du Child

Exemple :Passage des données Child-->Parent

npx crcf components/child

import React, { Component } from "react";

class Child extends Component {
constructor(props) {
super(props);

/*Créer une state qui sera utilisé dans le formulaire*/
this.state = {
nom:"",
prenom:""
}
/*Ecouter les changment des input pour modifier le state */
this.changerEtat = this.changerEtat.bind(this);
}

/*Modifier le nom et le prenom du state*/
changerEtat(event) {
this.setState({
[event.target.name]: event.target.value
});
}

/*Envoyer les données au parent*/
traiterPuisEnvoyerAuParent = () => {
let donneesAenvoyer={
nom:this.state.nom,
prenom:this.state.prenom,
}
/*Appler Envoyer les données au parent*/
this.props.traiterPuisEnvoyerAuParent(donneesAenvoyer);
};
/*Afficher l'interface*/
render() {
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">
<input value={this.state.nom} onChange={e => this.changerEtat(e)} name="nom" className="form-control" type="text" placeholder="Nom"/>
<input value={this.state.prenom} onChange={e => this.changerEtat(e)} name="prenom" className="form-control" type="text" placeholder="Prenom"/>
<input onClick={this.traiterPuisEnvoyerAuParent} className="form-control btn btn-success " type="button" value="Envoyer"/>
</div>
</div>
);
}
}

export default Child;

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



class App extends Component {


/*Création et initialisation de la state*/
state = {
donnees:{
nom:"Null",
prenom: "Null"
}
}
/*Traiter les données une fois reçues du child*/
getDataFromChild = (data) =>{
this.setState({donnees:{
...this.state.donnees,
nom: data.nom,
prenom: data.prenom
}});
}

render()
{
return (
<div>
<Navigation />
<Container fluid>
<div className="card text-danger card bg-warning mb-3">
<div className="card-header">Hi je suis parent J'attends</div>
<div className="card-body">
Data from my Child :<br/>
Nom:<b>{this.state.donnees.nom }</b> <br/>
Prenom:<b>{this.state.donnees.nom }</b> <br/>
</div>
</div>

{/*Appler la méthode traiterPuisEnvoyerAuParent du child puis traiter les données avec getDataFromChild*/}
<Child traiterPuisEnvoyerAuParent={this.getDataFromChild}/>
</Container>
</div>
);
}
}

export default App;