tengo los siguientes elementos:

En reaccionar acabo de declarar lo siguiente:

 const [type, setType] = useState(""); const [propertyName, setPropertyName] = useState("");

El html es el siguiente:

 <div> <label htmlFor='properties' className='properties-label'> Properties </label> <div className='property-box'> <input type='text' id='type' placeholder='Type' className='type-element' required onChange={(e) => setType(e.target.value)} ></input> <input type='text' id='name' className='type-element' placeholder='Name' required onChange={(e) => setPropertyName(e.target.value)} ></input> <button className='buttonAccount' type='submit'> Add Property </button> </div> </div>

Básicamente, lo que quiero es agregar una propiedad que contenga los dos valores. Estaba pensando en usar una matriz para almacenar algunos objetos como el siguiente ejemplo: { tipo: nombre de la tarjeta: Dragón }

Pero realmente no sé cómo abordar este problema. ¿Debería crear primero una matriz vacía y luego almacenar esos dos campos en un objeto? ¿Cómo se hace esto? ¿Cómo puedo asegurarme de que ambos campos estén completos (no deberían ir a la base de datos si uno de ellos está vacío)? Después de ingresar estos dos campos, quiero que aparezca un nuevo elemento justo debajo de esos campos, como un párrafo con los datos que introduje, un ejemplo que vi está familiarizado con esto en OpenSea, al crear un NFT ( https://opensea .io/asset/create ) ¿Puede alguien explicarme una forma de resolver este problema?