×

Html & Html5

The World's best Software Development Study Portal

ReactJS Keys

Reactjs Keys with Examples

Keys are used to identify which item in list are changed or updated. Keys also very useful for dynamically componentents or if list is changed by users. After setting changes it will keep all the components uniquely identify

Using Keys

import React, {Component} from 'react' class Datastate extends React.Component{ constructor() { super(); this.state={ data: [ { id:1, name:'Page', Roll:12 }, { id:2, name:'Parveen', Roll:12 } ] } } render(){ return( <div> <Header/> <table> <tbody> {this.state.data.map((dynamicComponent, i) => <TableRow key = {i} data = {dynamicComponent} />)} </tbody> </table> </div> ); } } class Header extends React.Component { render() { return ( <div> <h1>Header</h1> </div> ); } } class TableRow extends React.Component { render() { return ( <table> <tr> <td>{ this.props.data.id}</td> <td>{this.props.data.name}</td> <td>{this.props.data.Roll}</td> </tr> </table> ); } } export default Datastate;