title: How to assign unique ID to element for each component instance
body: <p>I've got a ReactJS component that I have multiple instances of. 
  I want to change components elements' css with an on-click. </p>
  
  <p>I tried to reference the specific component element by ID, but the problem is that currently, the ID or each component instance is the same, which results in all components changing.</p>
  
  <p>I'm thinking of passing a unique reference to each component, but I don't know how to change it in the element's html id's . In Angular a solution is like this:</p>
  
  <pre><code>&lt;span id="{{ 'object-' + $component_idx }}"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>is there something similar to achieve this in React? Or is there a better way to achieve what I'm trying to do?</p>
  
  <p><strong>Here's what I'm doing right now:</strong></p>
  
  <p><em>calling component instance in parent:</em></p>
  
  <pre><code>&lt;Entry
      title={instance_title}
      number={i}
    /&gt;
  </code></pre>
  
  <p><em>Creating an Entry component:</em></p>
  
  <pre><code>class Entry extends React.Component {
    constructor(props) {
      super(props);
      this.state = { preference: 4 };
    }
  
  
  preferencer(idx) {
      // change emoji size
      let oldPref = this.state.preference;
      if (idx == this.state.preference) {
        this.state.preference = 4;
        document.getElementById("emo" + idx).style.transform = "scale(1)";
      } else if (idx != this.state.preference) {
        this.state.preference = idx;
        document.getElementById("emo" + idx).style.transform = "scale(2)";
        if (oldPref != 4) {
          document.getElementById("emo" + oldPref).style.transform = "scale(1)";
        }
      }
    }
  
  
    render() {
      return (
        &lt;Wrapper&gt;
          &lt;EmojiWrap id="emo0" onClick={() =&gt; this.preferencer(0)}&gt;
             {" "}
           &lt;/EmojiWrap&gt;
           &lt;EmojiWrap id="emo1" onClick={() =&gt; this.preferencer(1)}&gt;
             
           &lt;/EmojiWrap&gt;
           &lt;EmojiWrap id="emo2" onClick={() =&gt; this.preferencer(2)}&gt;
             
          &lt;/EmojiWrap&gt;
        &lt;/Wrapper&gt;
       );
      }
   }
  export default Entry;
  </code></pre>
  
  <p>Thanks!</p>