Estoy desarrollando con React.js y debajo hay una versión simplificada de mi componente. Como puede ver, cuando hago clic en el botón estado (número), obtengo un número. Y esto es lo que quiero, hacer etiquetas div tanto como un número en el estado (número) en la etiqueta de formulario (cuyo nombre de clase es 'b').
¿Podría decirme cómo hacer esto posible? Gracias por leer. Su ayuda será apreciada.
//state const[number,setNumber] = useState('') //function const appendChilddiv =(e)=>{ e.preventDefault() setNumber('') } <div> <form className="a" onSubmit={appendChilddiv}> <input value={number} onChange={(e)=>setNumber(e.target.value)} type="number"/> <button type="submit">submit</button> </form> <div> <form className="b"> </form> </div> </div>Creé un codesandbox que incluye el siguiente código, anteriormente estabas almacenando el valor como una cadena, sería mejor almacenarlo como un número para que puedas usarlo para mapear, lo que hago a través del constructor Array() (esto crea una matriz de una longitud fija, en este caso el tamaño del estado divCount ; cuando actualizamos el estado cambiando el valor de entrada, esto crea una nueva representación y es por eso que la asignación se actualiza con el nuevo valor)
import "./styles.css"; import * as React from "react"; export default function App() { //state const [divCount, setDivCount] = React.useState(0); //function const appendChilddiv = (e) => { e.preventDefault(); // Submit your form info etc. setDivCount(0); }; return ( <div> <form className="a" onSubmit={appendChilddiv}> <input value={divCount} onChange={(e) => setDivCount(Number(e.target.value))} type="number" /> <button type="submit">submit</button> </form> <div> <form className="b"> {Array(divCount) .fill(0) .map((x, idx) => ( <div key={idx}>Div: {idx + 1}</div> ))} </form> </div> </div> ); }Puedes hacer lo siguiente.
Lo primero que hace es crear una nueva matriz de algún number de longitud.
Luego, llena esa matriz con undefined, porque crear nuevas matrices como esta en realidad no crea una matriz de esa longitud.
Por último, mapeamos esta matriz, usamos el índice como nuestra clave. Devolvemos un div vacío para cada elemento de la matriz.
Tenga en cuenta que usar un índice como clave no es la mejor idea. En general, debe ser algo lo más único posible. Si tiene datos que puede usar que son únicos, entonces debe usarlos como una clave.
return new Array(number).fill(undefined).map((_, key) => <div key={key}></div>);Puede asignar una matriz cuya longitud sea la misma que la ingresada en input y crear divs (si el número ingresado es válido):
{!isNaN(number) && parseInt(number, 10) > 0 && Array(parseInt(number, 10)) .fill(0) .map((_, idx) => <div key={idx}>Hey!</div>) }isNaN comprueba si el número es válidoparseInt(number, 10) convierte la cadena en número,Array(n) crea una nueva matriz con n elementos (todos vacíos) (intente iniciar sesión en la consola Array(5) ), por lo que debe llenarla.fill(n) llena la matriz (hace que cada elemento sea n )map se usa para representar diferentes elementos de cosas existentesEntonces, de esta manera, puede lograr el resultado mencionado.
Aquí hay un enlace a Code Sandbox en funcionamiento para su referencia