bonjour j'ai eu un cour de réact mais j'ai encore du mal avec on m'as demander de faire un formulaire avec une const et je n'arrive pas a faire mon formulaire sans que il y ai une erreur j'essaie de le faire avec un .map()
Salut ton problème vient surement du fait qu'il y a des types Checkbox dans answer.options.
Il faut également mapper dessus pour afficher toutes les options, mais il y a un piège, car s'il n'y a pas d'options, le map retournera une erreur. Donc il fait faire une condition avec in ternaire également.
Tu dois mettre surement ta const exam dans un state, ci dessous je ne l'ai pas fait:
function App() {
const exam = [
{
question: "Votre nom",
answer: {
name: "lastname",
type: "text",
},
},
{
question: "Votre prénom",
answer: {
name: "firstname",
type: "text",
},
},
{
question: "À quoi sert React ?",
answer: {
name: "q0",
type: "radio",
options: [
{
value: "q0_a1",
text: "à administer des bases de données",
},
{
value: "q0_a2",
text: "à créer des interfaces utilisateurs en Javascript",
},
{
value: "q0_a3",
text: "à envoyer des requêtes réseau avec Javascript",
},
{
value: "q0_a4",
text: "à rien",
},
],
},
},
{
question: "Sur quel concept repose React ?",
answer: {
name: "q1",
type: "radio",
options: [
{
value: "q1_a1",
text: "les modules",
},
{
value: "q1_a2",
text: "les services",
},
{
value: "q1_a3",
text: "les composants",
},
{
value: "q1_a4",
text: "les microservices",
},
],
},
},
{
question: "Qui développe React ?",
answer: {
name: "q2",
type: "radio",
options: [
{
value: "q2_a1",
text: "Google",
},
{
value: "q2_a2",
text: "Twitter",
},
{
value: "q2_a3",
text: "Apple",
},
{
value: "q2_a4",
text: "Facebook",
},
],
},
},
{
question: "À quoi servent les 'props' ?",
answer: {
name: "q3",
type: "radio",
options: [
{
value: "q3_a1",
text: "à passer des propriétés au composant",
},
{
value: "q3_a2",
text: "à créer un état pour le composant",
},
{
value: "q3_a3",
text: "à afficher le composant",
},
{
value: "q3_a4",
text: "à casser les pieds",
},
],
},
},
{
question: "À quoi sert 'JSX' ?",
answer: {
name: "q4",
type: "radio",
options: [
{
value: "q4_a1",
text: "à faire des appels à la base de données",
},
{
value: "q4_a2",
text: "à rajouter des types à Javascript",
},
{
value: "q4_a3",
text:
"à fournir une surcouche syntaxique à Javascript pour appeler les fonctions React",
},
{
value: "q4_a4",
text: "c'est un autre nom pour Javascript",
},
],
},
},
{
question: "Qu'est-ce qu'un 'state' ?",
answer: {
name: "q5",
type: "checkbox",
options: [
{
name: "q5_a1",
text: "un stockage permanent",
},
{
name: "q5_a2",
text: "un stockage interne du composant",
},
{
name: "q5_a3",
text: "aucun des deux",
},
],
},
},
{
question: "Quels sont les avantages de React ?",
answer: {
name: "q6",
type: "checkbox",
options: [
{
name: "q6_a1",
text:
"il permet de générer des baslises HTML dynamiquement sur le navigateur",
},
{
name: "q6_a2",
text:
"il permet d'améliorer les performances en réduisant les échanges réseau'",
},
{
name: "q6_a3",
text: "il permet de faire un site le plus légé possible",
},
],
},
},
{
question: "Comment puis-je faire un affichage conditionnel ?",
answer: {
name: "q7",
type: "checkbox",
options: [
{
name: "q7_a1",
text: "En utilisant une fonction",
},
{
name: "q7_a2",
text: "En passant des paramètres à la fonction 'ReactDOM.render'",
},
{
name: "q7_a3",
text: "En utilisant une expression ternaire",
},
],
},
},
{
question:
"'react-dom-router' permet de faire varier l'affichage en fonction de l'URL",
answer: {
name: "q8",
type: "toggle",
},
},
{
question:
"'create-react-app' permet de générer un projet React préconfiguré",
answer: {
name: "q9",
type: "toggle",
},
},
];
return (
<form>
{exam.map(({ question, answer }) => (
<div>
<legend>{question}</legend>
{answer.type === "checkbox" ? (
answer.options.map((option) => (
<div>
<input type={answer.type} name={option.name} />
<label>{option.text}</label>
</div>
))
) : (
<input name={answer.name} type={answer.type} />
)}
</div>
))}
</form>
);
}
Salut ton problème vient surement du fait qu'il y a des types Checkbox dans answer.options.
Il faut également mapper dessus pour afficher toutes les options, mais il y a un piège, car s'il n'y a pas d'options, le map retournera une erreur. Donc il fait faire une condition avec in ternaire également.
Tu dois mettre surement ta const exam dans un state, ci dessous je ne l'ai pas fait:
function App() {
const exam = [
{
question: "Votre nom",
answer: {
name: "lastname",
type: "text",
},
},
{
question: "Votre prénom",
answer: {
name: "firstname",
type: "text",
},
},
{
question: "À quoi sert React ?",
answer: {
name: "q0",
type: "radio",
options: [
{
value: "q0_a1",
text: "à administer des bases de données",
},
{
value: "q0_a2",
text: "à créer des interfaces utilisateurs en Javascript",
},
{
value: "q0_a3",
text: "à envoyer des requêtes réseau avec Javascript",
},
{
value: "q0_a4",
text: "à rien",
},
],
},
},
{
question: "Sur quel concept repose React ?",
answer: {
name: "q1",
type: "radio",
options: [
{
value: "q1_a1",
text: "les modules",
},
{
value: "q1_a2",
text: "les services",
},
{
value: "q1_a3",
text: "les composants",
},
{
value: "q1_a4",
text: "les microservices",
},
],
},
},
{
question: "Qui développe React ?",
answer: {
name: "q2",
type: "radio",
options: [
{
value: "q2_a1",
text: "Google",
},
{
value: "q2_a2",
text: "Twitter",
},
{
value: "q2_a3",
text: "Apple",
},
{
value: "q2_a4",
text: "Facebook",
},
],
},
},
{
question: "À quoi servent les 'props' ?",
answer: {
name: "q3",
type: "radio",
options: [
{
value: "q3_a1",
text: "à passer des propriétés au composant",
},
{
value: "q3_a2",
text: "à créer un état pour le composant",
},
{
value: "q3_a3",
text: "à afficher le composant",
},
{
value: "q3_a4",
text: "à casser les pieds",
},
],
},
},
{
question: "À quoi sert 'JSX' ?",
answer: {
name: "q4",
type: "radio",
options: [
{
value: "q4_a1",
text: "à faire des appels à la base de données",
},
{
value: "q4_a2",
text: "à rajouter des types à Javascript",
},
{
value: "q4_a3",
text:
"à fournir une surcouche syntaxique à Javascript pour appeler les fonctions React",
},
{
value: "q4_a4",
text: "c'est un autre nom pour Javascript",
},
],
},
},
{
question: "Qu'est-ce qu'un 'state' ?",
answer: {
name: "q5",
type: "checkbox",
options: [
{
name: "q5_a1",
text: "un stockage permanent",
},
{
name: "q5_a2",
text: "un stockage interne du composant",
},
{
name: "q5_a3",
text: "aucun des deux",
},
],
},
},
{
question: "Quels sont les avantages de React ?",
answer: {
name: "q6",
type: "checkbox",
options: [
{
name: "q6_a1",
text:
"il permet de générer des baslises HTML dynamiquement sur le navigateur",
},
{
name: "q6_a2",
text:
"il permet d'améliorer les performances en réduisant les échanges réseau'",
},
{
name: "q6_a3",
text: "il permet de faire un site le plus légé possible",
},
],
},
},
{
question: "Comment puis-je faire un affichage conditionnel ?",
answer: {
name: "q7",
type: "checkbox",
options: [
{
name: "q7_a1",
text: "En utilisant une fonction",
},
{
name: "q7_a2",
text: "En passant des paramètres à la fonction 'ReactDOM.render'",
},
{
name: "q7_a3",
text: "En utilisant une expression ternaire",
},
],
},
},
{
question:
"'react-dom-router' permet de faire varier l'affichage en fonction de l'URL",
answer: {
name: "q8",
type: "toggle",
},
},
{
question:
"'create-react-app' permet de générer un projet React préconfiguré",
answer: {
name: "q9",
type: "toggle",
},
},
];
return (
<form>
{exam.map(({ question, answer }) => (
<div>
<legend>{question}</legend>
{answer.type === "checkbox" ? (
answer.options.map((option) => (
<div>
<input type={answer.type} name={option.name} />
<label>{option.text}</label>
</div>
))
) : (
<input name={answer.name} type={answer.type} />
)}
</div>
))}
</form>
);
}
merci beaucoup pour t'on aide et j'ai réutiliser le bout de code que tu as fait pour les checkbox pour le réutiliser sur les radio il me manque plus que a voir pour les toggle j'ai vu dans les cour de open classroom que il faut mettre un key= je vais essayer vor ce que ça donne
- Edité par afthegamer 9 avril 2021 à 15:58:27
react problème de formulaire
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]