Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Adding Properties boxes on the spot inside a form tag

i have the following elements:
Html format

In react I just declared the following:

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

The html is the following:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

           <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>

What I want to basically is somehow to add a property, containing the two values. I was thinking using an array to store some objects like the following example:
{
type: card
name: Dragon
}

But I don’t really know how to tackle this problem. Should I first create an empty array and then store those two fields in an object? How is this done? How can I make sure that both of the fields are completed(they shouldn’t go to the database if one of them is empty). After these two fields are inputted I want a new element appear right underneath those fields, like a paragraph with the data that I introduced, an example that I saw is familiar with this is on OpenSea, when creating an NFT(https://opensea.io/asset/create)
Can somebody explain me a way to solve this problem?

>Solution :

you can have a look on this code

https://codesandbox.io/s/crazy-lake-059b82?file=/src/App.js:0-1339

to make paragraph visible create one more state and update it on handleClick function

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading