I'm trying to make a savable note with React and localStorage. Whenever 'Save' is clicked, it should save the value in the textarea to localStorage, and whenever 'Clear' is clicked, it should clear the textarea and the data from localStorage.
import { useState } from "react";
import "./App.css";
function App() {
const storage = window.localStorage;
const [text, setText] = useState('');
const data = storage.getItem('text');
return (
<div className="App">
<div className="box">
<div className="field">
<div className="control">
<textarea
className="textarea is-large"
placeholder="Notes..."
value={data}
onChange={(e) => setText(e.target.value)} />
</div>
</div>
<button
className="button is-large is-primary is-active"
onClick={() => storage.setItem('text', text)}>Save</button>
<button
className="button is-large"
onClick={() => {storage.removeItem('text'); setText('')}}>Clear</button>
</div>
</div>
);
}
export default App;
It works as supposed, except, when I click 'save', I can't type or delete anything in the textarea. Also, when I click 'clear' it clears the box only after I reload the page.
How can I fix this?
First, you should set the value of the textarea using the state variable text, otherwise you cannot edit it anymore once you click save. This is because the value on the local storage stays the same when you type, thus making it impossible to update the value.
Second, you need to initialize the state variable text to the value that you have in the local storage if there is any. Otherwise, it will always be empty when you refresh.
The code to apply both of these changes is the following:
function App() {
const storage = window.localStorage;
const data = storage.getItem('text');
const [text, setText] = useState(data ?? '');
return (
<div className="App">
<div className="box">
<div className="field">
<div className="control">
<textarea
className="textarea is-large"
placeholder="Notes..."
value={text}
onChange={(e) => setText(e.target.value)} />
</div>
</div>
<button
className="button is-large is-primary is-active"
onClick={() => storage.setItem('text', text)}>Save</button>
<button
className="button is-large"
onClick={() => {storage.removeItem('text'); setText('')}}>Clear</button>
</div>
</div>
);
}
export default App;
In the textArea element you have to assign the "value" as your "text" state.
<textarea
className="textarea is-large"
placeholder="Notes..."
value={text} // --> here
onChange={(e) => setText(e.target.value)} />
See here: Working example