Add custom option in react.js drop down and how to populate

Question

Novice in react.js and working on a project.

My jsx file is this:

const myFunction= () => {
...
declaring the data in variable called statuses
...
  return (
    <>
      <h4>Show statuses</h4>
      <div className="float-left">
        Filter
        <Dropdown
          optionLabel="value"
          optionValue="key"
          options={statuses}
          filterBy="value"
          filter
          showClear
        />
      </div>
    </>
  );
}

Data in statuses shows like this:

[
  {
    "key": 1,
    "text": "Status 1",
    "value": "Status 1"
  },
  {
    "key": 2,
    "text": "Status 2",
    "value": "Status 2"
  },
 ]

The result i am getting is this:

    <ul class="p-dropdown-items" role="listbox">
<li class="p-dropdown-item" aria-label="Status 1" role="option" aria-selected="false">Stlatus 1</li>
<li class="p-dropdown-item" aria-label="Status 2" role="option" aria-selected="false">Status 2</li>
</ul>

My questions are these:

1. How can i insert a custom option in the drop down before the statuses variable? I would like to have a custom option with ie value='0' label='All'.
2. Why isn't the value of each dropdown item showing in the produced html code? Am i missing something or do i need a different syntax?

Thank you all in advance

Answer 1

You can map your array and return Dropdown element with appropriate props smth like this in your jsx:

{data.map((obj) => {
   return (
      <Dropdown
          key={obj.key} // should be added
          optionLabel={obj.text}
          optionValue={obj.value}
          options={statuses}
          filterBy={obj.value}
          filter
          showClear
        />
   )
})}