ReactJS - Claves

Reaccionar keysson útiles cuando se trabaja con componentes creados dinámicamente o cuando los usuarios modifican sus listas. Establecer elkey value mantendrá sus componentes identificados de forma única después del cambio.

Usando claves

Creemos dinámicamente Contentelementos con índice único (i). losmap función creará tres elementos de nuestra dataformación. Desde elkey El valor debe ser único para cada elemento, asignaremos i como clave para cada elemento creado.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data:[
            {
               component: 'First...',
               id: 1
            },
            {
               component: 'Second...',
               id: 2
            },
            {
               component: 'Third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Obtendremos el siguiente resultado para los valores clave de cada elemento.

Si agregamos o eliminamos algunos elementos en el futuro o cambiamos el orden de los elementos creados dinámicamente, React usará el key valores para realizar un seguimiento de cada elemento.