Persist state in localStorage and retrieving state in componentDidMount - reactjs

Question

I am trying to persist the state of Button option value in localStorage when the user selects it and retrieve the state in componentDidMount method but I am getting a null value. When the user navigates back to the page then state value should be there. Can anyone tell me what's wrong with my code?
code::
import React, { Component } from "react";
import { Button } from "semantic-ui-react";
import { withRouter } from "react-router";
import Answers from "../Answers/Answers";
class Section extends Component {
state = {
que1: "",
que2: "",
que3: ""
};
handleClick = event => {
this.setState(
{
que1: event.target.attributes.getNamedItem("data-key").value
}
),
() => {
localStorage.setItem("que1", que1);
console.log(this.state.que1);
}
};
handleClick2 = event => {
this.setState(
{
que2: event.target.attributes.getNamedItem("data-key").value
}
),
() => {
localStorage.setItem("que2", que2);
console.log(this.state.que2);
}
};
handleClick3 = event => {
this.setState(
{
que3: event.target.attributes.getNamedItem("data-key").value
}
),
() => {
localStorage.setItem("que3", que3);
console.log(this.state.que3);
}
};
componentDidMount() {
this.setState({
que1: localStorage.getItem("que1"),
que2: localStorage.getItem("que2"),
que3: localStorage.getItem("que3")
});
}
render() {
console.log(this.state);
let styles = {
width: '50%',
margin: '0 auto',
marginBottom: '15px'
}
const { history } = this.props;
const { que1, que2, que3 } = this.state;
return (
<>
<p>1. I was stressed with my nerves on edge.</p>
<Button.Group widths="5" onClick={this.handleClick} style={styles}>
<Answers selected={this.state.que1} style={{ backgroundColor: 'red' }} />
</Button.Group>
{` `}
<p>2. I lost hope and wanted to give up when something went wrong.</p>
<Button.Group widths="5" onClick={this.handleClick2} style={styles}>
<Answers selected={this.state.que2} style={{ backgroundColor: 'red' }} />
</Button.Group>
{` `}
<p>3. I feel very satisfied with the way I look and act</p>
<Button.Group widths="5" onClick={this.handleClick3} style={styles}>
<Answers selected={this.state.que3} style={{ backgroundColor: 'red' }} />
</Button.Group>
<p />
{` `}
<Button
disabled={!que1 || !que2 || !que3}
onClick={() => history.push("/section2", [this.state])}
>
NEXT
</Button>
</>
);
}
}
export default withRouter(Section);
output ::

Answer 1

In your onclick handlers, you have:
handleClick2 = event => {
this.setState(
{
que2: event.target.attributes.getNamedItem("data-key").value
}
),
() => {
localStorage.setItem("que2", que2);
console.log(this.state.que2);
}
};
In the setState callback, you need to change it to(you logged the correct value, but didn't store it properly):
localStorage.setItem("que2", this.state.que2);

Answer 2

This is not supposed to be the React way of doing it. You should implement a redux workflow here which will help you persist data when navigating between pages. Refer https://redux.js.org/basics/usage-with-react. And when you click on the back button, you can retrieve the values back from the redux store.
Now, in your case change it to
handleClick(e) => {
const value = event.target.attributes.getNamedItem('data-key').value;
this.setState({que1 : value});
localStorage.setItem('que1', value);
};
And in the constructor
constructor() {
this.state = {
que1 : localStorage.getItem('que1') ? localStorage.getItem('que1') : ''
};
};
But this above solution is not at all recommended. Go ahead with the redux approach.