Estaba intentando que el objeto creara campos de entrada usando un par de clave y valor. Pensé que sería muy fácil, pero recibo este error. No encuentro una manera fácil de hacer esto, excepto esto.
import {Form, Input, Button } from 'semantic-ui-react' const input = [{ name: 'Full Name', dob: 'Date of Birth', parentName: "Father's/Mother's Name", email: "Email", mobile: "Mobile Number", password: "Password", rePassword: "Re-enter Password", aadhar: "Aadhar Number" }] // const inputList = ["Full Name", "Date of Birth", "Father's/Mother's Name", "Email", "Mobile Number","Password", "Re-enter Password", "Aadhar"] let inputList = []; for(let key in input) { inputList.push(<Form.Field name={key} key={key} control={Input} label={input[key]} />) } const RegistrationForm = () => { return( <Form> <Form.Field name="name" control={Input} placeholder='Full Name' label='Full Name:'/> { {inputList} // inputList.map((input,index) => { // return(<Form.Field key={index} control={Input} label={input}/>) // }) } </Form> ) } export default RegistrationForm Entonces, lo que estoy tratando de hacer aquí es crear un objeto donde mi clave sería el nombre del campo de formulario y el valor sería la etiqueta. Para usar eso, estaba usando for loop pero recibo el error mencionado anteriormente. ¿Cómo resolver esto? Si no, ¿hay alguna otra manera de hacer esto?
El problema con su código es que al renderizar al DOM, React convertirá JSX a elemento HTML DOM (puede leer más aquí ). Entonces, cualquier cosa dentro del corchete, React asumirá que es un código JS incrustado que espera devolver JSX, una matriz de JSX o un valor. Al hacer {{inputList}} , lo que está tratando de hacer es decirle a React que represente un objeto JS con clave, sintaxis ES6 que puede leer más aquí , inputList en el DOM, que es fundamentalmente ilegal hacerlo en React. Entonces, dado que ya está creando JSX para cada elemento en inputList en su ciclo for , puede hacer {inputList} en lugar de esto:
const RegistrationForm = () => { return( <Form> <Form.Field name="name" control={Input} placeholder='Full Name' label='Full Name:'/> {inputList} </Form> ) } En otra nota, si no desea usar for loop, lo que puede hacer en su lugar es esto:
let inputList = Object.entries(input).map(([key, value]) => (<Form.Field name={key} key={key} control={Input} label={value} />)); Puede leer más sobre Object.entries aquí