Hola, soy nuevo en ReactJS y Javascript. ¿Cómo muestro cualquier cantidad de cuadros de texto (campo de entrada, entrada de texto) en un modal, según la cantidad de palabras que hay en una oración?
Por ejemplo, debido a que hay 5 palabras en "Espero que lo estés haciendo muy bien", la cantidad de campos de texto de entrada en el modal debe ser 5.
Actualmente estoy haciendo esto:
const [inputFields, setInputField] = useState([ {word: ''},{word: ''},{word: ''},{word: ''},{word: ''} ])y
<InputGroup className="mb-3"> {inputFields.map((inputField, index) => ( <Form key={index}> <Form.Control label="word" name="word" value={inputField.word} /> </Form> ))} </InputGroup>pero es manual y me encantaría que funcione dinámicamente por sí solo.
Cuento el número de palabras como de costumbre:
const handleShow = (poem) => { var lyric = poem.lyrics; var words_array = lyric.split(' ') var words_num = words_array.length console.log(words_num) setShow(true) };Gracias.
export default function DynamicInputs({poem}){ const [inputFields, setInputField] = useState([]) useEffect(() => { setInputField(poem.lyrics.split(' ').map(word => ({word}))) }, [poem]) return ( <> { inputFields.map((field, index) => ( <input type="text" key={index}/> )) } </> ) }