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

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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>}