Discussions

Comment modifier pour le coup par exp : mon deuxieme élements nom etc... avec le state

Image
Bonsoir, Nicolas j'espere que la capture va passé
  1. voila j'ai voulu modifier le deuxieme eleves avec la méthode
  2. malheureusement il s'affiche toujours sur la première fiche je dois
  3. 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
Image
Louis-Nicolas Leuillet
Le 21/07/2022 à 06: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 ! :)

Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le 20 juillet 2022 19:42
Dernière activité le 20 juillet 2022 19:42