React hooks radio button list gives warning: Each child in a list should have a unique "key" prop

Question

Although the form with radio buttons is working as intended (check selected option and showing correspondent component) I keep getting the unique key prop warning.
I am using an array of objects to feed data to the render function and return radio input jsx.

Code is as follows: (Main form)

import React, {useState} from 'react'

import FormOperationOptions from './FormOptions'
import UserConfig from './user-config/UserConfig'



const Form = () => {

const[operation, setOperation] = useState('')

const selectOperationOnChange = (event) =>{
  setOperation(event.target.value);
} 
 
const operationsListKey =  FormOperationOptions.map((operations)=>{
  return operations.id})


const renderAllOperations = (value, key) => {
    return(
<div>
      <input type='radio' 
      
      key={key} 
      value={value} 
      checked={value===operation? true:false}
      readOnly
      />
      <label htmlFor={value}>{value}</label><br/>
  </div>
    )
  }

const selectedOperation = () => {
  if(operation === 'userConfig'){return(<div><UserConfig /></div>)}
}

return(
  <div>
<h3>Choose operation type:</h3>
<form 
    onChange={selectOperationOnChange}
>
    {FormOperationOptions.map((operations)=>{
    return renderAllOperations(operations.selectedOption, operationsListKey);})}
</form>          
    {selectedOperation()}
  </div>
  )
}
export default Form 

(where the data for the form comes from)

const FormOptions = [
  {
    id:1,
    selectedOption: 'userConfig',
  },
  {
    id:2,
    selectedOption: 'gitIgnore',
  },
  {
    id:3,
    selectedOption: 'localRepository',  
  },
  {
    id:4,
    selectedOption: 'remoteRepository',   
  },
]

export default FormOptions

and the UserConfig component:

import React from 'react'

const UserConfig = () =>{

  return(
    <div> UserConfig component </div>
  )
}

export default UserConfig

Thank you for your time and input :)

Answer 1

You are adding 'key' in wrong element. It should be added on "div" not "input".

const renderAllOperations = (value, key) => {
  return(
    <div key={key}>
    <input type='radio'      
      value={value} 
      checked={value===operation? true:false}
      readOnly
    />
    <label htmlFor={value}>{value}</label><br/>
    </div>
  )
}

If key is needed for 'input', you can pass another one like below

const renderAllOperations = (value, key) => {
  return(
    <div key={key}>
    <input type='radio'
      key={`radio_${key}`}      
      value={value} 
      checked={value===operation? true:false}
      readOnly
    />
    <label htmlFor={value}>{value}</label><br/>
    </div>
  )
}

Answer 2

Can you try this:

return(
  <div>
<h3>Choose operation type:</h3>
<form 
    onChange={selectOperationOnChange}
>
    {FormOperationOptions.map((operations)=>{
    return renderAllOperations(operations.selectedOption, operations.id);})}
</form>          
    {selectedOperation()}
  </div>
  )

That way, each mapped operation would have the id as a key. In your code you are passing operationsListKey as second argument, and that is a function itself returning the id for each of the operations every time the map function iterates.

Let me know if it worked.