React: setState of array of object changes every item - reactjs

Question

I'm building a memory game using React. I have an array of cards where each card can be "matching" (the user has just clicked on it) or "matched" (the user has found both cards and they are now completely shown). My issue is that when I try to set the matching state using setState the state changes for every card and not just the clicked one. Here's what I have:
import React from 'react';
import ReactDOM from 'react-dom';
import Card from './card';
import './index.css';
class Game extends React.Component {
constructor() {
super();
this.state = {
cards: Array(4).fill(
{
matching: false,
matched: false,
}
),
currentlyMatching: false,
}
}
handleCardClick(index, type) {
let currentCardsState = this.state.cards.slice();
currentCardsState[index].matching = true;
this.setState({cards: currentCardsState});
}
renderCard(index, type) {
return <Card value={type}
matching={this.state.cards[index].matching}
matched={this.state.cards[index].matched} // this line is the issue
onClick={() => this.handleCardClick(index, type)}
/>;
};
render() {
return <div id="game">
{this.renderCard(0,"red")}
{this.renderCard(1, "green")}
{this.renderCard(2, "red")}
{this.renderCard(3, "green")}
</div>;
};
}
ReactDOM.render(
<Game />,
document.getElementById('root')
);

Answer 1

The problem you have is that you are not creating 4 independent objects for every card. You are creating one object which appears in the array four times. That means that changing any index affects all indices.
That's how Array.fill works.
To create four independent states, you need something like this:
const cards = [];
for(var i = 0; i < 4; i++) {
cards.push({
matched: false,
matching: false
));
}

Answer 2

You can add a shouldComponentUpdate to each Card component to prevent unnecessary re-renders:
shouldComponentUpdate(prevProps, prevState) {
return prevProps !== this.props
}
Or you can specifically target a single prop:
shouldComponentUpdate(prevProps, prevState) {
return prevProps.matched !== this.props.matched
}

Answer 3

And this is exactly what is expected: you are setting in the state a new array of objects and for this reason the render is called again for each of them