Home Why does this code give an "Each child in a list should have a unique 'key' prop" error?

Questions

Why does this code give an "Each child in a list should have a unique 'key' prop" error?

April 22, 2022

If I replace the fragment (<> </>) with a div and give it a key I no longer get the error but that also screws up my button group. Each of these elements has a unique key and the fragment should not be a dom element so why this error? Any suggestions on a solution?

{["long", "short", "out", "none"].map(stance =>
           <>
               <input type="radio" className="btn-check" id={stance} key={stance}
               autoComplete="off" checked={options.stance === stance} disabled={options.auto}/>
               <label key={`${stance}label`} className="btn btn-outline-primary btn-sm" htmlFor={stance}>{stance}</label>
           </>
)}