Difficultés Code React - Premier Code

Par BOUBOU28, il y a 1 an

Javascript React

Décrivez ici votre problème ou ce que vous cherchez à faire.
Notre professeur nous a demandé de faire un formulaire avec le prix unitaire et le nombre d'article. Une fois qu'on clique sur le bouton valider, le total doit être afficher en dessous. En sachant, que le formulaire doit être divisées entre 3 composants, c'est obligatoire. Mais cette partie je l'ai réussi. Le problème, c'est que j'ai essayé maintenant d'appliquer le code react permettant de faire le calcul fournie par le prof mais rien ne s'est affichée.

"```" import { useState } from 'react' import '../public/article.png' import './App.css' const [valueTot, setValueTot] = changer = (e) => {setValueTot(e.target.value);} export default function App() { return ( <> <div id="flex"> <Image/> <div id="align"> <h1>Calcul du prix</h1> <Login/> <br/> <Valid/> </div> <Result/> </div> </> ) } export function Login() { return ( <> <div> <div> <input type="number" class="input" value={valueTot} onChange={changer} placeholder="Quantité" id="qte"/> <br/> <br/> <input type="number" class="input" placeholder="Prix unitaire" id="price"/> </div> </div> </> ) } export function Valid() { return ( <> <div> <button id="cancel">Annuler</button> <input type="submit" value="Valider" onClick={ (e)=> {e.preventDefault ();}} id="valid"/> </div> </> ) } export function Image() { return ( <> <img id="img" src="article.png" alt="Image de l'article"></img> </> ) } export function Result() { return ( <> <div> <p>Total : {valueTot} </p> </div> </> ) } "```"

Ce que je veux

Trouver où se trouve le problème dans mon code

Ce que j'obtiens
Rien du tout. C'est blanc. Rien n'est affichée.

2 réponses

Smith john, il y a 1 an

Salut à toi,

L'idée est de ne pas te donner la réponse directement, mais de te laisser réfléchir un peu à ton code.

J'imagine que ton prof ne vous a pas lancé dans React sans rien vous montrer, et qu'au minimum il vous a expliqué la gestion d'état avec useState.

Donc, si je devais indiquer tes erreurs, ce serait :

Ta gestion d'état n'est pas conforme à React. C'est pour cela que ton écran est blanc. Je t'invite à regarder les erreurs dans ta console (F12 => console).
Un useState ne peut être utilisé QUE dans un composant ou un custom hook, mais en aucun cas en dehors.

Tu as mélangé fonction et gestion d'état. Soit tu fais l'un, soit tu fais l'autre, mais dans ton cas, tu veux un useState ET une fonction.

Voilà, on va commencer par ça. Je pense que tu devrais relire tes notes/cours ou regarder les tutoriels de Grafikart (le cours sur useState) et travailler là-dessus, parce que tu as probablement manqué quelque chose dans ta compréhension de la gestion d'état. C'est essentiel que tu sois clair avec le useState, car tu vas l'utiliser dans 100 % de tes applications React.

PS : Tu n'as pas besoin d'utiliser de Fragment (<>...</>) dans tes composants si le JSX ne contient qu'un seul élément. Donc, dans tes trois composants, tu peux les supprimer.

Courage une fois useState maitrisé tu vas commencer à t'amuser.

BOUBOU28, il y a 1 an

J'ai poursuis votre piste et j'ai pû enfin trouver la solution. Pour être net, je pense que je vais faire la formation sur React sur Grafikart en complémentarité avec mon cours.

Quoi qu'il en soit, merci infiniment pour votre retour :)