title: How to add a class to an image by click?
body: <p>How to add a class to an image if the flag is done: true? As I have not tried, the class is added to all images, and not to those with true...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  import "./styles.css";
  
  export default function App() {
    const [avatarArr, setAvatarArr] = useState({
      avatar: [
        {
          id: 1,
          url: "https://starwars-visualguide.com/assets/img/characters/1.jpg"
        },
        {
          id: 2,
          url: "https://starwars-visualguide.com/assets/img/characters/2.jpg"
        },
        {
          id: 3,
          url: "https://starwars-visualguide.com/assets/img/characters/3.jpg"
        }
      ]
    });
    const [classUser, setClassUser] = useState(null);
    const [selectUser, setSelectUser] = useState(false);
  
    const onAddClass = id =&gt; {
      if (avatarArr.avatar.find(items =&gt; items.id === id)) {
        const index = avatarArr.avatar.findIndex(items =&gt; items.id === id);
        setAvatarArr([
          ...avatarArr.slice(0, index),
          ...avatarArr.slice(index + 1)
        ]);
      } else {
        setAvatarArr([...avatarArr, { done: true }]);
        setSelectUser(avatarArr.avatar.map(items =&gt; items.done));
        if (selectUser) {
          setClassUser("active__user");
        }
      }
    };
  
    const blockCreate = () =&gt; {
      return avatarArr.avatar.map(items =&gt; {
        return (
          &lt;div key={items.id}&gt;
            &lt;img
              src={items.url}
              alt="avatar"
              width="150px"
              onClick={() =&gt; onAddClass(items.done, items.id)}
              className={selectUser ? classUser : null}
            /&gt;
          &lt;/div&gt;
        );
      });
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;div&gt;{blockCreate()}&lt;/div&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm trying to set true on click, to tell the user that the avatar that was clicked on is selected, and add some kind of styling class.</p>
  
  <p>And if you click a second time, then true - becomes false, in short - the choice</p>