For Believers.
Discussions
Comment modifier pour le coup par exp : mon deuxieme élements nom etc... avec le state
Bonsoir, Nicolas j'espere que la capture va passé
- voila j'ai voulu modifier le deuxieme eleves avec la méthode
- malheureusement il s'affiche toujours sur la première fiche je dois
- surement ne pas utiliser la bonne facon.. avec notament " Thomas Ritchy "
PS : j'ai mis en commentaire // IMMUTABLE changement du state dynamique
Peu tu m'éckairé Merci...
PS2: Autre probleme qui n'a rien à voir avec le code, je recoi actuellement
sur ma messagerie ndidier@gmx.com des messages comme quoi je n'ai pas regler
mon abonnement j'ai changer les coordonnées de la CB et il me renvoie en permanence
l'ancienne CB j'ai vérifier à ma banque et à priorie le paiement est passer
Attention c'est un paiement différé cela peut viens de votre serveur..
// Librairies
import React, { Component } from 'react';
import './App.css';
// Component Eleve
import Eleve from '../../Components/Eleve/Eleve';
// 1) Méthode function création composant
// la plus utiliser en react..
// function App() {
// return (
// <div className="App">
// <h1>Bienvenue sur mon premier projet React !</h1>
// <h2>Projet React Les Composants</h2>
// </div>
// )
// JSX : Sucre syntaxique JSX --> Javascript XML
// Écrire plus facilement du Javascript
// Attention JSX dois absolument avoir un element parent exp: <DIV>
// pas de h1, h2 etc..
//);
// Demonstration de la creation en JS du JSX react
// return React.createElement('div', {className: 'App'},
// React.createElement('h1', null, 'Bienvenue sur mon premier projet React !'
// )
// );
// }
// 2) Méthode function fléché création composant pour
// les functions anonymes exp: liste, calcul etc...
// On peut aussi refactoring le code sur les fonction =>
// const App1 = () => <div className="App">
// <h1>Bienvenue sur mon premier projet React !</h1>
// </div>
// const App1 = () => {
// return (
// <div className="App">
// <h1>Bienvenue sur mon premier projet React !</h1>
// </div>
// );
// }
// 3) Méthode par les class heritage extends
// STATEFULL / CONTAINER : Composant qui gère un state
// STATELESS / Component : Composant qui ne gère pas de state
// La bonne méthode : le "moins" de containers possible.
class App extends Component {
state = {
eleves: [
{ name: 'Eva Dupont', mean: 15, quote: 'Toujours plus loin' },
{ name: 'Timothée Galo', mean: 5, quote: 'Toujours plus haut' },
{ name: 'Didier Durand', mean: 25, quote: 'Toujours plus vite' }
],
maintenance: false,
//eleves: newState
}
buttonClickedHandler = (newName, newNameB) => {
// IMMUTABLE changement du state dynamique
const newState = [...this.state.eleves];
newState[0].name = newName;
newState[0].mean = 25;
//const newStateB =[...this.state.eleves];
//newState[1].name = newNameB;
this.setState({
maintenance: false,
eleves: newState,
//eleves: newStateB
});
}
render() {
return (
<div className='App'>
<h1>Bienvenue dans la classe Terre</h1>
<button onClick={this.buttonClickedHandler.bind(this, 'Elon Musk')}>Transformer le premier élevé</button>
<Eleve
name={this.state.eleves[0].name}
mean={this.state.eleves[0].mean}
clicked={() => this.buttonClickedHandler('Léa Richther')}
>
{this.state.eleves[0].quote}
</Eleve>
<Eleve
name={this.state.eleves[1].name}
mean={this.state.eleves[1].mean}
clicked={() => this.buttonClickedHandler('Thomas Ritchy')}
>
{this.state.eleves[1].quote}
</Eleve>
<Eleve
name={this.state.eleves[2].name}
mean={this.state.eleves[2].mean}
>
{this.state.eleves[2].quote}
</Eleve>
</div>
);
}
}
export default App;
//console.log('Voici Un Composant React' + App)
1 réponse
Louis-Nicolas Leuillet
Le 21/07/2022 à 08:59
Bonjour Didier,
Le state est modifié avec le premier élément car vous ciblez le premier ici :
newState[0].name = newName;
newState[0].mean = 25;Nous verrons comment cibler les autrers éléments.
Pour votre second problème, je l'envoie à mon équipe. Il sera vite réglé, merci beaucoup ! :)
Inscrivez-vous ou connectez-vous pour participer à la discussion.
Informations
Créée le 20 juillet 2022 21:42Dernière activité le 20 juillet 2022 21:42