Show multiple objects values as a Input values in forms Reactjs

Question

I have a array of objects getting from api like this

[0: {id: 1, name: "dine", restaurant: 2} 1: {id: 2, name: "pick", restaurant: 2}]

Now I want to show this just name of these both objects like this dine,pick . I was able to show this in a div like this

 {articleopt.ingredient.map(ingred => (
                                <div>{ingred.name + ","}</div>
                              ))}

But how can I assign this to a form input field value= {} ? My input field code is

<div className='col-sm-6'>
                <div className='form-group text-left'>
                  <label htmlFor='' className='small'>
                    Ingredient:
                  </label>
                  <InputField 
                  name='ingredient'
                  value={""}
                  placeholder={"Enter Ingredient comma separated"} />
                </div>
              </div>

Nick · Accepted Answer · 2019-11-16 23:08:06Z

1

Assuming you have some data like this, you can map/join the array down to a comma-separated string.

const data = [{id: 1, name: "dine", restaurant: 2}, {id: 2, name: "pick", restaurant: 2}];
const combined = data.map(el => el.name).join(",");

You can render JSX as follows:

<div className='form-group text-left'>
  <InputField value={combined} />
</div>

edited Nov 16, 2019 at 23:08

answered Nov 16, 2019 at 22:54

Nick

16.7k3 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gamer Over a year ago

thanks sir for answer .your solution is creating two fields , I want this data in one field with comma separated

Nick Over a year ago

Oh I see, so you just want one field ever?

gamer Over a year ago

Yes Exactly . One field with comma separated names

Nick Over a year ago

Updated! Let me know if this is what you're looking for

gamer Over a year ago

got it . thanks <3 is there any resources to read for issues like this ? kindly refer if any you have

Collectives™ on Stack Overflow

Show multiple objects values as a Input values in forms Reactjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related