localStorage after updated web site is reset - reactjs

Question

In my react app I have 12 buttons and an array which has a length of 12 that is filled with the plus character: .fill("+");.
I have function that after clicking on one of these buttons that changes the Array(i) to ("-");
I need to save this Array in localStorage, but for this I create:
localStorge = localStorage.spots(spots=is my varryable in code) = JSON.stringify(Array(12).fill("-"));
I tap on my button and may local storage changed ==cool = everything works
but after reload my web my Array in local storage =
JSON.stringify(Array(12).fill("-"));
it is logic because I write it in beginning of the code, but I don't need it. I need to create local storage (Array(12).fill("-")) change it after clicking on my buttons and after reload local storage stayed changed.
app.js
export default class Hall extends React.Component {
constructor(props) {
super(props);
this.state = {
spots:JSON.parse(localStorage.spots),
}
}
handlClick(i) {
const spots =this.state.spots.slice();
spots[i]="бронь";
localStorage.spots=JSON.stringify(spots);
const color = this.state.color.slice();
color[i]="danger";
this.setState({
spots:JSON.parse(localStorage.spots),
color: color,
});
}
renderSquare(i) {
return (
<Spot
onClick={()=> this.handlClick(i)}
value={this.state.spots[i]}
/>
);
}
render() {
return (
<div className="BySpot">
<div className="date"></div>
<div className="inSpot">
<div className="screen">screen</div>
<div className="exit">exit</div>
<div className="board-row1">
board-row1
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row2">
board-row2
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row3">
board-row3
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
<div className="board-row4">
board-row4
{this.renderSquare(9)}
{this.renderSquare(10)}
{this.renderSquare(11)}
</div>
</div>
</div>
);
}
}
index.js
function Main(props) {
localStorage.spots = JSON.stringify(Array(12).fill("своб"));
return (
<main className="main" >
<Nav />
<WrapMain />
</main>
)
};
ReactDOM.render(
<Main />,document.getElementById("root")
);

Answer 1

That is a wrong syntax, you can't add value in localStorage that way. Try this:
localStorage.setItem('spots', JSON.stringify(spots))
and then you can get from localStorage
const spots = localStorage.getItem('spots')
and parse the spots variable if you need.
Here you can read more in docs.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage