Discussions

code eleve.js et app.js

Image

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
Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le 4 juillet 2022 17:43
Dernière activité le 4 juillet 2022 17:43