Non-DOM attributes

"Alright Shawn, it's time to take a detailed look at our application again. If you closely see the console output, you will see a few warnings related to Keys."

"Each child in an array should have a unique \"key\" prop. Check the render method of Rows. See http://fb.me/react-warning-keys for more information."

"In the render() method of Rows, we are rendering collection of the Row components."

RecentChangesTable.Rows = React.createClass({
  render: function() {
    var rows = this.props.changeSets.map(function(changeSet) {
      return(<Row changeSet = {changeSet}/>);
    });

    return <tbody>{rows}</tbody>;
  }
});

"During the rendering of list items, a component may move up or down in the DOM tree based on the user interaction. For example, in case of search or sorting, the items in the list can change their position. New items can also get added to the front of the list in case new data gets fetched. In such cases, React may remove and recreate components based on the diff algorithm. But if we provide a unique identifier for each element in the list, then React will intelligently decide whether to destroy it or not. This will improve the rendering performance. This can be achieved by passing a unique key prop to every item in the list."

In our case, the number of rows is currently fixed. But later on, we want to show the updates page as the new data is being fetched from the API. The situation gets complicated when children are added or removed dynamically as the state and identity of each component must be maintained in every render pass. The key prop will help React to uniquely identify the component in such cases. Go ahead and use the index of the Row component for this purpose as it will be unique as of now" Mike further explained.

"Cool. So let me try adding the key prop to Rows. I noticed same issue with the Headings component too, therefore, I will add a key for Headings as well." said Shawn.

RecentChangesTable.Rows = React.createClass({
  render: function() {
    var rows = this.props.changeSets.map(function(changeSet, index) {
      return(<Row key={index} changeSet = {changeSet}/>);
    });

    return (<p>{rows}</p>);
  }
});
RecentChangesTable.Headings = React.createClass({
  render: function() {
    var headings = this.props.headings.map(function(name, index) {
      return(<RecentChangesTable.Heading key={index} heading = {name}/>);
    });

    return (<thead><tr>{headings}</tr></thead>);
  }
});

"Perfect. Note that the value of keys for a given list should be unique. We will get to know more about the keys when we start updating the DOM based on dynamic data. But this is good enough for now" said Mike.

"Makes sense. Are there any more such keywords/identifiers available for us?"

"Yes. Along with key, there is also refs or references. It allows the parent component to keep a reference of a child component. Right now, we can't access the child components outside the render() method of the component. But having ref allows us to use the child component anywhere in the component, not just the render() method."

<input ref="myInput" />

"Now, we can access these references outside the render method too."

    this.refs.myInput

"It's pretty useful when we want to inform a component to change something at runtime. We will discuss and use refs in more detail later when we deal with event handlers" Mike added.