[FIXED] Where is this coming from: Warning: Each child in a list should have a unique "key" prop

Issue

I try this CodeSandbox and also tried it in VCode locally but can't see where this warning in the log comes from:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `App`. See https://reactjs.org/link/warning-keys for more information.
    at CurrentForm (http://localhost:3000/static/js/main.chunk.js:1284:11)
    at App (http://localhost:3000/static/js/main.chunk.js:1102:70)

I changed the CurrentForm Component "Form.js" map so the key had a unique id using like "npm i uuid" but that was not it.

Solution

Add key to Form component: Codesandbox

import React, { useReducer } from "react";
import ReactDOM from "react-dom";
import { Router } from "@reach/router";
import { Form, Result, Landing } from "./steps";
import { NavigationButtons } from "./components";
import { initialState, dataReducer, DataContext } from "./dataContext";
import { formConfig } from "./consts/formConfig";

import "./styles.css";

function App() {
  return (
    <div>
      <DataContext.Provider value={useReducer(dataReducer, initialState)}>
        <Router>
          <Landing path="/" />
          {formConfig.map(({ prevStep, ...props }, index) => (
            <Form
              key={index}
              {...props}
              render={(prevStep) => <NavigationButtons prevStep={prevStep} />}
            />
          ))}
          <Result path="result" />
        </Router>
      </DataContext.Provider>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answered By - Ketan Ramteke

Answer Checked By - David Marino (PHPFixing Volunteer)