title: How can I make a list of integers click on element with corresponding id?
body: <p>I have a list of ids (integer) and I have multiple  components.
  After a request to my API, the  component receives a list of ids that should already be active.
  I want to simulate a click on each element with the same id as the one in my array. I know I can use refs to do that, but I don't undertstand how to make it works with a list of elements.</p>
  
  <p>Here's my code : </p>
  
  <pre><code>import React, { Component } from 'react'
  import InterestBox from './InterestBox'
  import Axios from 'axios'
  
  export class InterestList extends Component {
  
      constructor(props) {
          super(props);
          this.state = {pinterests: []}
      }
  
      componentDidMount() {
          Axios.get('http://localhost:8000/api/interests')
          .then((success) =&gt; {
              this.setState({pinterests: success.data.data.interests});
          })
      }
  
      componentDidUpdate(prevProps) {
          console.log(JSON.stringify(prevProps));
          console.log(JSON.stringify(this.props))
          if(this.props.alreadyChecked != prevProps.alreadyChecked) {
              this.props.alreadyChecked.forEach((item) =&gt; {
                  console.log(item)
              })
          }
      }
  
      render() {
          return (
              &lt;React.Fragment&gt;
                  {Object.keys(this.state.pinterests).map((interest) =&gt; {
                      var pinterest = this.state.pinterests[interest];
                      return &lt;InterestBox id={pinterest.id} onClick={this.props.onClick} icon={pinterest.picture_src} title={pinterest.name} /&gt;
                  })}
              &lt;/React.Fragment&gt;
          )
      }
  }
  
  export default InterestList
  </code></pre>
  
  <pre><code>import React, { Component } from 'react'
  export class InterestBox extends Component {
  
      constructor(props) {
          super(props);
          this.images = require('../../img/interests/*.svg');
  
          this.state = {activated: false};
          this.interest_box_content = React.createRef();
          this.interest_text = React.createRef();
          this.handleClick = this.handleClick.bind(this);
          this.updateDimensions = this.updateDimensions.bind(this);
      }
  
      handleClick() {
          this.props.handleClick(this.props.id, this.props.title);
          this.setState(prevState =&gt; ({
              activated: !prevState.activated
          }))        
      }
  
      updateDimensions() {
          console.log((window.getComputedStyle(this.refs.interest_box_content).width))
          this.refs.interest_text = (window.getComputedStyle(this.refs.interest_box_content).width)
      }
  
      render() {
          return (
              &lt;div className="column is-one-fifth-desktop is-half-touch"&gt;
                  &lt;div className="interest-box"&gt;
                      &lt;div className="interest-box-adjuster"&gt;
                          &lt;div ref={"interest_box_content"} className={"interest-box-content " + (this.state.activated == true ? 'interest-box-activated' : '')} onClick={this.handleClick}&gt;
                              &lt;img className="interest-icon" src={this.images[this.props.icon]} style={{'height': '50%'}}&gt;&lt;/img&gt;
                              &lt;i className="activated-icon fas fa-check"&gt;&lt;/i&gt;
                              &lt;span ref={"interest_text"} className="interest-text"&gt;{this.props.title}&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default InterestBox
  </code></pre>
  
  <p>In the InterestList "componentDidUpdate" method, the value of the item is an integer.
  I want to use this integer to "click" on the InterestBox with the corresponding "id".</p>
  
  <p>How can I achieve this ?</p>