2

If you go to Instaram and open up the console you will see that there are words used in data-reactid attribute

https://instagram.com/kyliejenner/

data-reactid=".0.1.0.1:$mostRecent:0.0.$0.$1036585483152156993.0.2"

Have a look for yourself. How did they do that ? and why is that happening ?

Any thoughts ?

1 Answer 1

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.