score:0

Accepted answer

well, react.js works beautifully on single page applications. that said, your item list(<ul>...</ul>) should be another react component, let's call it itemlist, so you can make the like component a mixin and then include the mixin in any other component (itemlist) you want. then you only need to attach the itemlist component into the html.

if the item list is already a react component all you need to do is to use the jsx notation in each item like this:

<li>
  <span>item name</span>
  <img src="itemimage.jpg"/>
  <likebutton/>
</li>

edit

based on op comment:

so, if the <ul> is plain html, you definitely cannot use the jsx syntax to add the like button or anything similar to what you would do in angular. i still think that the best approach is to have the item list extracted into another component but if you want to stick to it the only, ugly, way i can imagine is to have another html tag, let's say a div, inside each div and then inject the react component when the dom is loaded, something like

<li>
  <span>item name</span>
  <img src="itemimage.jpg"/>
  <div class="likeanchor"></div>
</li>

<script type="text/babel">
  reactdom.render(<likebutton/>, document.getelementbyclass('likeanchor'));
</script>

probably iterating over all the .likeanchor elements.


Related Query

More Query from same tag