Tengo el siguiente código en mi React:
const [property, setProperty] = useState([]); const [state, setState] = React.useState({ type: "", propertyName: "" }); const handleChange = (e, inputField) => { setState((prevState) => ({ ...prevState, [inputField]: e.target.value, })); }; const handleSubmit = () => { if (state.type !== "" && state.propertyName !== "") { const newObject = { type: state.type, propertyName: state.propertyName }; property.push(newObject); console.log(property); setState({ type: "", propertyName: "", }); } };y HTML:
<div> <label htmlFor='properties' className='properties-label'> Properties </label> <div className='property-box'> <input type='text' id='type' value={state.type} placeholder='Type' className='type-element' required onChange={(e) => handleChange(e, "type")} ></input> <input type='text' id='name' value={state.propertyName} className='type-element' placeholder='Name' required onChange={(e) => handleChange(e, "propertyName")} ></input> <button className='buttonAccount' type='submit' onClick={handleSubmit} > Add Property </button> </div> </div>Lo que quiero es cuando presiono el botón Agregar propiedad, se mostrará una nueva etiqueta html en la página (un cuadro o algo así que contenga los dos campos que se ingresaron). ¿Puedes ayudarme a encontrar una manera de hacer eso?
Puede usar el método de map de matriz de Javascript para mapear cada elemento en su estado de property en un elemento HTML.
Por ejemplo:
property asignada a elementos HTML. const renderProperties = () => { return property.map((item, index) => ( // `item` is a representation of each of your object in the property array // In this case, item contains { type: string, propertyName: string } <div key={index}> // React requires user to put a key in each of the mapped component <p>{item.propertyName}</p> <p>{item.type}</p> </div> )) } ... <button className='buttonAccount' type='submit' onClick={handleSubmit} > Add Property </button> </div> {renderProperties()} // <-- Here </div>Tienes que imprimir los elementos en tu matriz de property . Por ejemplo:
{ property.map((element) => ( <div key={element.propertyName}> <span> {element.type} </span> <span> {element.propertyName} </span> </div> ) }