I have array iterating options of redux form option... How I will give dafault value and place holder because it shows the first value of array which don't want... I want to show the placeholder instead

  <Field
    name="facilityId"
    ponent="select"
    className="form-control"
    placeholder="sdsfdsafjdsafijdsaoi"
  >
    {owners.map((data, i) => {
      return (
        <option value={data._id} key={i}>{data.profile.name}</option>
      )
    })}
  </Field>

I have array iterating options of redux form option... How I will give dafault value and place holder because it shows the first value of array which don't want... I want to show the placeholder instead

  <Field
    name="facilityId"
    ponent="select"
    className="form-control"
    placeholder="sdsfdsafjdsafijdsaoi"
  >
    {owners.map((data, i) => {
      return (
        <option value={data._id} key={i}>{data.profile.name}</option>
      )
    })}
  </Field>

• javascript
• reactjs
• redux-form

Share Improve this question Follow edited Jun 4, 2018 at 18:08 Ashh asked Sep 18, 2017 at 11:09 AshhAshh 46.6k1616 gold badges111111 silver badges137137 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can do the following

<ControlLabel>Patients</ControlLabel>
    <Field
        name="facilityId"
        ponent="select"
        className="form-control"
        placeholder="sdsfdsafjdsafijdsaoi"
    >
        <option value="-1" disabled>Choose patient</option>
        {owners.map((data, i) => {
            return (
                <option value={data._id} key={i}>{data.profile.name}</option>
            );
        })}
    </Field>
<FormControl.Feedback />

PS: Sorry if the formatting is off. I'm typing with my phone.

Using Redux-form, multiple select fields, and loading the options asynchronously - I had issues w/ the chosen answer not working 100% of the time. This works in my case. Notice the value is "".

<ControlLabel>Patients</ControlLabel>
<Field
    name="facilityId"
    ponent="select"
    className="form-control"
    placeholder="sdsfdsafjdsafijdsaoi"
>
    <option value="" disabled>Choose patient</option>
    {owners.map((data, i) => {
        return (
            <option value={data._id} key={i}>{data.profile.name}</option>
        );
    })}
</Field>