import React, { useState } from "react"; function Form() { const [components, setComponents] = useState(["1"]); function addComponent() { setComponents([...components, 1]); } const defaultState = [ { title: "", desc: "", }, ]; const [form, setForm] = useState(defaultState); const handleChangeTitle = (e) => { setForm({ title: e.target.value, desc: form.desc, }); }; const handleChangeDesc = (e) => { setForm({ title: form.title, desc: e.target.value, }); }; return ( <div> <div style={{ display: "flex" }}> <button onClick={addComponent}>+</button> {components.map((item, i) => ( <> <div style={{ display: "flex" }}> <label> Title: <input type="text" name="title" onChange={(e) => handleChangeTitle(e)} /> </label> <label> Description: <input type="text" desc="desc" onChange={(e) => handleChangeDesc(e)} /> </label> </div> </> ))} </div> </div> ); } export default Form;

Hola, tengo un código como el de arriba. Al presionar el botón "+" en la página, se extrae una entrada de texto para el título y la descripción en la pantalla. Esto significa que los números de entrada aumentan según la solicitud del usuario. Quiero imprimir estas entradas, que tienen más de un objetivo, en un solo objeto (defaultState en estado de formulario). Por ejemplo, si desea utilizar el usuario, presionó el botón más 2 veces y la vista del objeto debería ser la siguiente: {title:'Title:'1st title', desc:'1.content', title:'2 .título', descripción:'2.contenido', título:'3.título', descripción:'3.contenido'}