Introduction to React JS
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
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((s) => <TableRow a = {s} />)} </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.a.id}</td> <td>{this.props.a.name}</td> <td>{this.props.a.Roll}</td> </tr> </table> ); } } export default Datastate;