Exercices

Exercice 1

Modifiez le composant HelloAll pour utiliser plusieurs fois le composant Hello ci-dessous avec des props "name" différents.

function Hello(props){
    return <section>
        <h1>Salut {props.name} !</h1>
    </section>
}

Live Editor

function HelloAll(){
    return <main>
        <Hello name="tout le monde" />
    </main>
}

Result

Loading...

Correction

function HelloAll(){
    return <main>
        <Hello name="Clément !" />
        <Hello name="les LP" />
        <Hello name="tout le monde !" />
    </main>
}

Exercice 2

Faites en sorte, dans le composant suivant, que :

• le bouton ajoute 2 au compteur
• le compteur n'affiche que les nombres impairs
• une alerte soit affichée au clic

Live Editor

function Conter(){
    const [count, setCount] = useState(0)
    return <main>
        <p>Count: {count}</p>
        <button onClick={() => {
            setCount(count+1)
        }}>
            +1
        </button>
    </main>
}

Result

Loading...

Correction

function Conter(){
    const [count, setCount] = useState(1)
    return <main>
        <p>Count: {count}</p>
        <button onClick={() => {
            setCount(count+2)
            alert('Bouton pressé !')
        }}>
            Next odd
        </button>
    </main>
}