title: Adapt "myRef" from class component into functional component - React
body: <p>I'm working on a single product page where I could manage to show what I want but using class components. To adapt it, I'm having too many problems, especially with myRef.
  I am having problems adapting myRef. Could someone help me to know how to adapt it to work with functional components?</p>
  <p>this is the code I am working with.</p>
  <pre><code>class SingleProduct extends React.Component{
    
  state = { 
      products: [
        {
          &quot;_id&quot;: &quot;1&quot;,
          &quot;title&quot;: &quot;Se perdio Roco&quot;,
          &quot;src&quot;: [
            &quot;http://flogfotos.miarroba.st/5/0/6/5779506/822.jpg&quot;,
            &quot;https://upload.wikimedia.org/wikipedia/commons/d/d5/Bianca_8_Meses.jpg&quot;,
            &quot;https://sumedico.blob.core.windows.net/images/2020/08/19/perrosboxerblanco.jpg&quot;,
            &quot;http://perros.mascotahogar.com/Imagenes/boxer-blanco.jpg&quot;
          ],
          &quot;zone&quot;: &quot;Yerba Buena, Tucumán&quot;,
          &quot;description&quot;: &quot;Perdido desde dia sabado 17 de Junio cerca del Solar del Cerro. Lleva puesto su cadena como se ve en las fotos. Reacciona al llamado de Roco. Es muy cariñoso&quot;,
          &quot;condition&quot;: &quot;No Encontrado&quot;,
          &quot;count&quot;: 1
        }
      ],
      index: 0
    };
  
    myRef = React.createRef();
  
    handleTab = index =&gt;{
      this.setState({index: index})
      const images = this.myRef.current.children;
      console.log(this.myRef.current.children)
      for(let i=0; i&lt;images.length; i++){
        images[i].className = images[i].className.replace(&quot;active&quot;, &quot;&quot;);
      }
      images[index].className= &quot;active&quot;
    };
  
    componentDidMount(){
      const {index} = this.state;
      this.myRef.current.children[index].className = &quot;active&quot;;
    }
  
    render () {
      const {products, index} = this.state;
      return(
        &lt;div className='app'&gt;
          {
            products.map(item =&gt;(
              &lt;div className='details' key={item._id}&gt;
                &lt;div className='big-img'&gt;
                  &lt;img src={item.src[index]} alt=&quot;&quot;/&gt;
                &lt;/div&gt;
  
              &lt;div className='box'&gt;
                &lt;div className='row'&gt;
                  &lt;h2&gt;{item.title}&lt;/h2&gt;
                  &lt;p&gt;{item.zone}&lt;/p&gt;
                  &lt;span&gt;{item.condition}&lt;/span&gt;
                &lt;/div&gt;
  
                &lt;p&gt;{item.description}&lt;/p&gt;
  
                &lt;div className=&quot;thumb&quot; ref={this.myRef}&gt;
                  {
                    item.src.map((img, index) =&gt;(
                      &lt;img src={img} alt=&quot;&quot; key={index}
                      onClick={() =&gt; this.handleTab(index)}
                      /&gt;
                    ))
                  }
                &lt;/div&gt;
                &lt;button className='cart '&gt;Ponte en contacto con el dueño&lt;/button&gt;
  
              &lt;/div&gt;
              &lt;/div&gt;
            ))
          }
        &lt;/div&gt;
      )
    }
  
  }
  
  </code></pre>