Issue
I'm trying to diplay a json that is in this format :
{ "color" : ['black','white','yellow'], "storage" : ['128','256','500','1000'], "brand" : ['apple' , 'samsung'], }
note that the keys here can be different every time it is not static. however, I want the values of each key to be enters by the user.
I want it to look something like this :
this is the code i have so far.
{rs.map(([key, value]) => (
<div key={key}>
<label htmlFor={key}>{key}</label>
<input
type="text"
id={key}
value={value}
onChange={(e) => handleInputChange(key, e.target.value)}
/>
</div>
))}
but this code is displaying this to me. enter image description here
how do I fix this? please explain the solution you would provide I'm a beginner
Solution
You have to iterate through keys so you can do like below
<div>
{
Object.keys(rs).map((key) => (
<div key={key}>
<label htmlFor={key}>{key}</label>
{
rs[key].map((value, index) => (
<input
type="text"
id={value}
value={value}
onChange={(e)=>handleInputChange(key, index, e.target.value)}
/>
))}
</div>
))}
</div>
Answered By - Kamran
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.