ReactJS: cada niño en una lista debe tener un accesorio de "clave" único

¿Cuál es la mejor manera de solucionar este tipo de problema?

Estoy tratando de usar el Link (react-router-dom) para ReactJS un botón me redirigirá a otra página "DadosEmpresaPage" a "SelecaoPlaenoElegibilidade", pero da error en mi ComponentSelector, ahora está arreglado, solo tengo que de alguna manera hacer una "lista" para representar mis componentes?

Mi index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// Materialize
import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.js';
// Component Dynamic Render Selector
import ComponentSelector from './components/ComponentSelector/ComponentSelector';
const ComponentList = ['NavigationBar', 'Breadcrumbs', 'DadosEmpresaPage'];
ReactDOM.render(
 <React.StrictMode >
 <ComponentSelector Render={ComponentList} />
 </React.StrictMode>,
 document.getElementById('root')
);

Mi ComponentSelector.js

// React
import React from 'react';
// Componentes
import HomePage from '../../pages/HomePage/HomePage';
import NavigationBar from '../../components/NavigationBar/NavigationBar';
import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
import DadosEmpresaPage from '../../pages/DadosEmpresaPage/DadosEmpresaPage';
import InformacoesComplementaresPage from '../../pages/InformacoesComplementaresPage/InformacoesComplementaresPage';
import ElegibilidadePage from '../../pages/ElegibilidadePage/ElegibilidadePage';
import SelecaoPlanoElegibilidadePage from '../../pages/SelecaoPlanoElegibilidadePage/SelecaoPlanoElegibilidadePage';
import DistribuicaoFaixasElegibilidadePage from '../../pages/DistribuicaoFaixasElegibilidadePage/DistribuicaoFaixasElegibilidadePage';
import GerarPropostaPage from '../../pages/GerarPropostaPage/GerarPropostaPage';
const componentMapping = {
 HomePage,
 NavigationBar,
 Breadcrumbs,
 DadosEmpresaPage,
 InformacoesComplementaresPage,
 ElegibilidadePage,
 SelecaoPlanoElegibilidadePage,
 DistribuicaoFaixasElegibilidadePage,
 GerarPropostaPage
};
const ComponentRender = ({ Render }) => {
 return (
 <div>
 {Render.map((componentName) => {
 const Component = componentMapping[componentName];
 return <Component />;
 })}
 </div>
 );
};
export default ComponentRender;

My DadosEmpresaPage.js

import React from 'react';
import './DadosEmpresaPage.css';
import StepCounter from '../../components/StepCounter/StepCounter';
import HeaderPage from '../../components/PageHeader/PageHeader'
import { Link } from "react-router-dom";
export default class DadosEmpresaPage extends React.Component {
 state = {
 }
 componentDidMount() {
 }
 render() {
 return (
 <div>
 <div className='row container'>
 <div className='col s9 m9 l9'>
 <br /><b><h5>Nova Oportunidade</h5></b>
 </div>
 <div className='col s3 m3 l3'>
 <br /><StepCounter step='1' total='4' />
 </div>
 </div>
 <div className='row container'>
 <HeaderPage Spotlight='Dados' Title='da Empresa' Description='Para iniciar a nova oportunidade, preencha ao lado os dados cadastrais da empresa, informe a quantidade de pessoas que farão parte do plano, assim como o número de titulares.' />
 <div className='col s5 m5 l5 offset-s3 offset-m3 offset-l3'>
 <div class="input-field col s12">
 <label for="cnpj">CNPJ</label>
 <input id="cnpj" type="text" name="cnpj" onChange={this.onChange} />
 </div>
 <div class="input-field col s12">
 <label for="razaoSocial">Razão Social</label>
 <input id="razaoSocial" type="text" name="razaoSocial" onChange={this.onChange} />
 </div>
 <div class="input-field col s12">
 <label for="estado">Estado</label>
 <input id="estado" type="text" name="estado" onChange={this.onChange} />
 </div>
 <div class="input-field col s12">
 <label for="cidade">Cidade</label>
 <input id="cidade" type="text" name="cidade" onChange={this.onChange} />
 </div>
 <div class="input-field col s12">
 <label for="quantidadeVidas">Quantidade de Vidas</label>
 <input id="quantidadeVidas" type="text" name="quantidadeVidas" onChange={this.onChange} />
 </div>
 <div class="input-field col s12">
 <label for="quantidadeTitulares">Quantidade de Titulares</label>
 <input id="quantidadeTitulares" type="text" name="quantidadeTitulares" onChange={this.onChange} />
 </div>
 <Link to={{pathname: '/InformacoesComplementaresPage'}}>NavigateNow</Link>
 </div>
 </div>
 </div>
 );
 }
};

Solución del problema

Al representar la lista en React, debe otorgar a cada elemento un identificador de clave único.

Una de las formas más rápidas de resolverlo es usando el índice como clave.

const ComponentRender = ({ Render }) => {
 return (
 <div>
 {Render.map((componentName, index) => {
 const Component = componentMapping[componentName];
 return <Component key={index} />;
 })}
 </div>
 );
};

Pero en caso de que desee agregar/eliminar elementos o mezclar el orden, tenga en cuenta que esta forma exacta (proporcionar índices como claves) podría no funcionar para usted. Luego, usar algunos otros valores únicos e inmutables como claves resolverá su problema.