How can I add to props and make a select option disabled?

Question

I have a dropdown list which I am getting from a list that is part of props. A Visual of how the props look like when I do console.log(props.farmAnimals)

  {id: "CA", name : "Cat"}
  {id: "DG", name : "Dog"}
  {id: "HN", name : "Hen"}
  {id: "PG", name : "Pig"}

I want to make the dropdown have the name Dog appear twice and have a non-selectable ----- as part of the dropdown options just after Dog. I want it to look like this

  {id: "DG", name : "Dog"}
  {id: "--", name : "----"}
  {id: "CA", name : "Cat"}
  {id: "DG", name : "Dog"}
  {id: "HN", name : "Hen"}
  {id: "PG", name : "Pig"}

How can I achieve this? I also need the --- to be non-selectable.

Answer 1

Based on the information you provide I guess you can just:

(1) create a new array with the additional items:

const list = [
  { id: 'DG', name: 'Dog' },
  { id: '--', name: '----' },
  ...farmAnimals,
];

(2) disable the <option> whose item has id '--':

  <select>
    {list.map((item, index) => (
      <option value={item.id} key={index} disabled={item.id === '--'}>
        {item.name}
      </option>
    ))}
  </select>