It's because of the key
attribute.
When dynamically creating child components, the children can be uniquely identified via the set key
attribute. This value will be visible in the data-reactid
attribute in said elements after being rendered into the DOM:
data-reactid=".0.1.$something"
something
is actually the value of the key
attribute.
Lets say you have a Queue
and a QueueItem
component. The Queue
component will have a queueData
Array and in it's render()
method, you'll dynamically create QueueItem
components with a key
attribute:
// QueueItem component.
render: function () {
return (
<li>
{ this.props.name }
</li>
);
}
// Queue component.
render: function () {
return (
<ul className="queue-data">
{
this.state.queueData.map(queueItem => <QueueItem key={ 'most-recent-' + queueItem.id } />)
}
</ul>
);
}
This will result in the following markup:
<ul class="queue-data" data-reactid=".0.1">
<li data-reactid=".0.1.$most-recent-1">one</li>
<li data-reactid=".0.1.$most-recent-2">two</li>
<li data-reactid=".0.1.$most-recent-3">three</li>
</ul>
More information about dynamic children can be found here