Q:

How to fix state update?

I draw a grid N × N. Suppose that grid is an array of N x N. I need to get the array' index when I click at the element and when put it to the store.
That is, I get the coordinates (x, y) relative to the canvas, and translate them into the index. The store is an associative array. Recording condition: if the store hasn't index I put it, if no I delete it.
The index, which I need to be written a second time as a rule and after erasing the console give the error
TypeError index: this.state.store.has is not a function. (The 'this.state.store.has (member)', 'this.state.store.has' is not defined)
How to fix it?

export default class SimulationField extends React.Component {
    
    constructor(props) {
        super(props);
        
        this.state = {
            store: new Map(),
            scale: 20,
            edge: this.props.edge
        }
    }
    
    handleClick(e) {
        
        let x = Math.floor(getMouseX(e, this.refs.canvas) * this.state.scale / this.state.edge)
        let y = Math.floor(getMouseY(e, this.refs.canvas) * this.state.scale / this.state.edge)
        
        let element = xy2Key(this.state.scale)([x, y])
        
        this.setState({ 
            store: ( this.state.store.has(element) )
                        ? this.state.store.delete(element)
                        : this.state.store.set(element, true)
        })
    }
    
    componentDidMount() {
        this.updateCanvas();
    }
    
    updateCanvas() {
        const ctx = this.refs.canvas.getContext('2d');
        renderGrid({ ctx, edge: this.state.edge, scale: this.state.scale })
    }
    
    render() {
        return (
            <div>
                <canvas
                    ref="canvas"
                    width={this.state.edge}
                    height={this.state.edge}
                    onClick={this.handleClick.bind(this)}>
                </canvas>
            </div>
        );
    }
}

A:

Nearly, but .delete won't return store like .set does.

Returns true if an element in the Map object existed and has been removed, or false if the element does not exist.

This means that if this.state.store.has(element) is ever true, you are effectively just doing:
this.setState({ 
  store: true
})

Next time you try and call store.has you are actually just trying to call true.has, which doesn't work.
Try this instead.
if (this.state.store.has(element)) {
  this.state.store.delete(element)
} else {
  this.state.store.set(element, true)
}

this.setState({ store })

