Add multiple inputs into an array react

Question

i am new to coding and i am looking at building a project to learn react, i am trying to do the following and i am kinda stuck

i want to add all these values into an array that would like like this

{
  option: {
    size: ["Small", "Medium", "Large"],
    color: ["Red", "Orange", "Blue"]
   }
}

How can i do this on react?

Answer 1

Are you looking for something like this?
There are better ways of doing it of course, but the general idea is there.

 function App() { const data = { option: { size: ["Small", "Medium", "Large"], color: ["Red", "Orange", "Blue"] } } return ( <div> <form> <p>Option</p> <input placeholder="Option"></input> <p>Variants</p> <input placeholder={data.option.size.join(', ')}></input> <p>Option</p> <input placeholder="Option"></input> <p>Variants</p> <input placeholder={data.option.color.join(', ')}></input> </form> </div> ); } ReactDOM.render( < App / >, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>