For Believers.
Discussions
code eleve.js et app.js
Comme convenu , veuillez trouver ci-joint le code
import React, { useEffect } from "react";
import classes from './Eleve.module.css'
import styled from "styled-components";
const Cartes = styled.div`
background-color: #3330E4;
color: #F5F0BB;
border: 5px solid #FAEA48;
margin: 15px;
font-size: 1.2rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: oblique;
letter-spacing: 0.9px;
width: 300px;
display: inline-block;
`;
function Eleve(props) {
useEffect(() => {
console.log(" [Eleve.js] componentDidMount")
})
useEffect(() => {
console.log(" [Eleve.js] componentDidUpdate ")
})
useEffect(() => {
console.log(" [Eleve.js] Le nom de l'éléve à été modifié ")
})
const moyenneClasses = [];
if(props.moyenne < 10) {
moyenneClasses.push(classes.green)
}
if(props.moyenne ==10) {
moyenneClasses.push(classes.orange)
}
else {
moyenneClasses.push(classes.red)
}
return (
<Cartes>
<h1 onClick={props.clic}>{props.nom}</h1>
<p>moyenne scolaire :
<b className={moyenneClasses.join('')}>
{props.moyenne} /20
</b>
</p>
<i>{props.children}</i>
<input type="text" onChange={props.changerNom} value={props.nom} style={{width:"100%"}}/>
<button style={{marginTop:"24px"}} onClick={props.supprimer}>supprimer</button>
</Cartes>
)
};
export default Eleve;
import React, { useState } from 'react';
import './App.css';
import Eleve from '../../Components/Eleve/Eleve';
import styled from 'styled-components';
const DisQuandReviendrasTu = styled.button`
//CSS !!!
padding : 20px;
background-color:#54BAB9;
color:#84B9EF
font-size:1.2rem;
font-style:italic;
&:hover{
backgroundColor:#204969;
color:#ECB365;
}
`;
function App() {
const [eleves , setEleves] = useState([
{
nom:"Sacha",
moyenne:3,
citation:"Oh la belle vie , on est triste"
},
{
nom:"Rio",
moyenne:18,
citation:"l'incendie à rio"
}
]);
const [afficherEleve , setAfficherEleve] = useState(false)
const showHideClickHandler = () => {
setAfficherEleve(!afficherEleve)
}
const removeClickHandler = index => {
const nouveauxEleves = [...eleves]
nouveauxEleves.splice(index,1)
setEleves(nouveauxEleves)
}
const nameChangeHandler = (event, index) => {
const nouveauxEleves = [...eleves]
nouveauxEleves[index] = event.target.value
setEleves(nouveauxEleves)
}
const DecoH1 = {
backgroundColor:"#24009C",
color:"#FF5E3A",
padding:"34px"
}
let prise = eleves.map((eleve ,index) => {
return (
<Eleve
key = {index}
nom = {eleve.nom}
moyenne = {eleve.moyenne}
supprimer = {() => removeClickHandler(index,1)}
changerNom = {(e) => nameChangeHandler(e,index)}
>
{eleve.citation}
</Eleve>
)
})
return (
<div className="App">
<h1 style={DecoH1}>Bienvenue Chez Moi</h1>
<DisQuandReviendrasTu onClick={showHideClickHandler}>Ajouter/supprimer</DisQuandReviendrasTu>
{ afficherEleve ?
<div>
{prise}
</div>
:null
}
</div>
);
}
export default App;
0 réponse
Inscrivez-vous ou connectez-vous pour participer à la discussion.
Informations
Créée le 4 juillet 2022 19:43Dernière activité le 4 juillet 2022 19:43