Change Icon of clicked element (React.js)

Question

I've done this before but it's not an optimized code, I was trying to do this in another way but I couldn't. So, what I need to achieve is to change the icon of only the clicked element. Right now, when I click on one of the icons, all of them change.
For easier understanding, there is a list with multiple colors and the user has to select one of them.
I'll leave the important code down below:

import React from 'react';

export class Costura extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            token: {},
            isLoaded: false,
            modelTextures: {},
            changeIcon: false
        };
        this.changeIcon = this.changeIcon.bind(this);
    }    

    changeIcon = () => {
        this.setState(prev => ({
            changeIcon: !prev.changeIcon
        }));
    };

    render() {

        let icon;

        if (this.state.changeIcon === true) {
            icon = (
                <img src="../../../ic/icon-check.svg"
                    alt="uncheck" className="Checking"
                    onClick={this.changeIcon} />
            );
        } else {
            icon = (
                <img src="../../../ic/icon-uncheck.svg"
                    alt="uncheck" className="Checking"
                    onClick={this.changeIcon} />
            );
        }

        const { modelTextures } = this.state;

        return (
            <div id="Options">
                <div id="OptionsTitle">
                    <img src="../../../ic/icon-linha.svg" alt="costura" />
                    <h2>Costura</h2>
                </div>
                {modelTextures.textures.map(texture => (
                    <div>
                       <img src={"url" + texture.image} />
                       <p key={texture.id}>{texture.name}</p>
                       {icon}
                    </div>
               ))}
            </div>
        );
    }
}

Answer 1

You can set the selectedTextureId in the state and make a check against that when rendering the component to display the unchecked or checked image icon. Following is the code for reference.

import React from 'react';

export class Costura extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            token: {},
            isLoaded: false,
            modelTextures: {},
            selectedTexture: null
        };
        this.selectedImageIcon = '../../../ic/icon-check.svg';
        this.unselectedImageIcon = '../../../ic/icon-uncheck.svg';
    }    

    changeIcon = (textureId) => () => {
      this.setState({
          selectedTexture: textureId
      })
    };

    render() {

        const { modelTextures } = this.state;
        return (
            <div id="Options">
                <div id="OptionsTitle">
                    <img src="../../../ic/icon-linha.svg" alt="costura" />
                    <h2>Costura</h2>
                </div>
                {modelTextures.textures.map(texture => (
                    <div key={texture.id}>
                       <img src={"url" + texture.image} />
                       <p key={texture.id}>{texture.name}</p>
                       <img 
                          src={this.state.selectedTexture === texture.id ? this.selectedImageIcon: this.unselectedImageIcon } 
                          alt="uncheck"
                          className="Checking" 
                          onClick={this.changeIcon(texture.id)} 
                       />
                    </div>
               ))}
            </div>
        );
    }
}