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

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