Updating the state of a object in a map function

Question

I'm trying to run a loop through the image array state in react to check to see if the image id is equivalent. If they are equivalent I want to update the state of the current object and change the state of beenClicked to true. Instead I don't get the beenClicked is true. I feel like it has something to do with the map function not returning the actual state but a replica of it but I'm unsure.Or am I going about this the wrong way

state = {
        imgArr: [{
            path: "./clickyImg3.png",
            beenClicked: false,
            id: 3
        }, {
            path: "./clickyImg4.jpg",
            beenClicked: false,
            id: 4

        }, {
            path: "./clickyImg5.jpg",
            beenClicked: false,
            id: 5

        }, {
            path: "./clickyImg6.jpg",
            beenClicked: false,
            id: 6
        }, {
            path: "./clickyImg9.png",
            beenClicked: false,
            id: 9
        }]
    }

imageRearrange = (imgId) => {
        console.log(imgId);
        this.state.imgArr.forEach((image) => {
            if (image.id === imgId) {
                const {imgArr} = this.state
               return  this.setState({
                    image: {
                        beenClicked : true
                    } 

                });
                // console.log(image)

            }
        })
        let newArr = this.shuffle(this.state.imgArr)

        this.setState({
            imgArr: newArr

        });
        console.log(this.state.imgArr)

<div className="row">
  {this.state.imgArr.map(img => {
       return <div className="col-md-4 gameImages">
                 <img src={img.path} alt="One" id={img.id} height="200px" onClick={() => this.imageRearrange(img.id)}></img>
              </div>
   })
</div>

Answer 1

Sorry, but Your setState in a forEach loop looks completely wrong. Try this one:

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        imgArr: [
            { path: "", beenClicked: false, id: 3 },
            { path: "", beenClicked: false, id: 4 },
            { path: "", beenClicked: false, id: 5 }
        ]
    };
    
    this.imageRearrange = (imgId) => {
        let newArr = this.state.imgArr.map((image) =>
            image.id === imgId ? { ...image, beenClicked : true } : image
        );

        this.setState({
            imgArr: newArr
        });
    }
  }
  
  render() {
    return (<div className="row">
        {this.state.imgArr.map(img => {
            return <div className="col-md-4 gameImages" key={img.id}>
                <img src={img.path} alt="One" id={'item_'+img.id} height="200px" onClick={() => this.imageRearrange(img.id)}>
                </img>
                <span>{' - clicked: ' + img.beenClicked}</span>
            </div>
            })
        }
        </div>)
  }
}

ReactDOM.render(<Test />, document.querySelector("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>