0

I'm trying to implement a an array of options for a form. Even though I have already implemented the key prop, I keep getting this error:

Each child in an array should have a unique "key" prop.

The options are taken from the following array of options:

[
  {
    "id": 1,
    "label": "Active",
    "value": "Active"
  },
  {
    "id": 2,
    "label": "Inactive",
    "value": "Inactive"
  },
  {
    "id": 3,
    "label": "Alert",
    "value": "Alert"
  }
]

Below follows my code:

<li>
    <label className={styles.destaque}>Status</label>
    <select
      value={camposFormulario?.status}
      onChange={(event) =>
        setCamposFormulario((prev) => ({
          ...prev,
          ['status']: event.target.value,
        }))
      }
    >
      {statusList.map((option: any) => {
        return (
          <option key={option.id} value={option.value}>
            {option.label}
          </option>
        );
      })}
    </select>
  </li>

I have read this topic: Understanding unique keys for array children in React.js and I believe I have followed the indications.

Any help would be much appreciated.
Thanks a lot!

Edit: Also, if I change the map function by this it works:

<option>Ativo</option>
<option>Inativo</option>
<option>Em Alerta</option>
Rafael
  • 191
  • 1
  • 11
  • This example seems fine. Maybe problem is in other part of the code? Try reconstruct this problem in codesandbox – jkaczmarkiewicz Jun 29 '21 at 19:16
  • 1
    https://codesandbox.io/s/awesome-lamport-ofp0i?file=/src/App.js This example is working fine. – jkaczmarkiewicz Jun 29 '21 at 19:29
  • thanks! it's definitely something else... but I can't find where! – Rafael Jun 29 '21 at 19:41
  • 1
    We can't either since we see only this part of the code. Please share with us output of `console.log(statusList)` – jkaczmarkiewicz Jun 29 '21 at 19:43
  • Sorry about that... the code is in a private repository in the company where I work.. not so simples : ) the console.log(statusList) generates this: [ {id: 1, label: "Active", value: "Active"}, {id: 2, label: "Inactive", value: "Inactive"}, {id: 3, label: "Alert", value: "Alert"} ] – Rafael Jun 29 '21 at 19:51
  • 1
    and statusList doesn't change? – jkaczmarkiewicz Jun 29 '21 at 19:54
  • YES! Nailed it! Thanks Since statusList comes from an api call, its initial value is 0!!! – Rafael Jun 29 '21 at 20:14

2 Answers2

0

although your id should be unique, you could use the provided index:

statusList.map((option, index) => { ... })

where index is the array-index

Snake Shadow
  • 78
  • 7
  • This is a bad practice. Please read this amazing article from Kent https://kentcdodds.com/blog/understanding-reacts-key-prop Using an index as a key should be the last option to be considered. In this example, a key should be `option.value` – jkaczmarkiewicz Jun 29 '21 at 19:21
  • This worked for me... I have tried option.value before without success – Rafael Jun 29 '21 at 19:24
0

Got it. Thanks for the help in the comments Jan!

Since statusList comes from an api call, its value is 0 when the page first renders. That's when the error is being displayed.

Any suggestions on how to render AFTER statusList is returned are very welcome!

Rafael
  • 191
  • 1
  • 11
  • statusList if coming from API is of array type then initialize it with empty [] and it might resolve your issue because generally for states of array type there initial values kept to an empty array so that they does not cause any issue with the existing code. – Piyush Rana Jul 10 '21 at 06:28