title: How to change image on button click with React Hooks?
body: <p>I am learning React and I want to make two buttons: White and Black, that change images to white t-shirt and black t-shirt. </p>
  
  <p>My goal is to achieve this with React Hooks.</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  // import Black from "../../assets/black.jpg";
  // import White from "../../assets/white.jpg";
  import "./Shirts.css";
  
  function Shirts() {
    const [white, setWhite] = useState(false);
    const [black, setBlack] = useState(true);
  
    const whiteImage = require(`../../assets/white.jpg`);
    const blackImage = require(`../../assets/black.jpg`);
  
    function changeToWhite() {
      console.log(setWhite(whiteImage));
    }
  
    function changeToBlack() {
      console.log(setBlack(blackImage));
    }
  
    // useEffect(() =&gt; {
    //   setWhite(white);
    // }, white);
  
    return (
      &lt;div&gt;
        &lt;div className="Shirts"&gt;
          &lt;img alt="T-Shirt" className="White" src={white} /&gt;
          &lt;img alt="T-Shirt" className="Black" src={black} /&gt;
        &lt;/div&gt;
        &lt;div className="ColorPicker"&gt;
          &lt;button className="WhiteB" onClick={changeToWhite}&gt;
            &lt;p className="WhiteT"&gt;
              W&lt;br /&gt;
              H&lt;br /&gt;
              I&lt;br /&gt;
              T&lt;br /&gt;E
            &lt;/p&gt;
          &lt;/button&gt;
          &lt;button className="BlackB" onClick={changeToBlack}&gt;
            &lt;p className="BlackT"&gt;
              B&lt;br /&gt;
              L&lt;br /&gt;
              A&lt;br /&gt;
              C&lt;br /&gt;K
            &lt;/p&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default Shirts;
  </code></pre>
  
  <p>What I achieved is they load on the first click but then they stop working.</p>