How to save edited text on refresh? - reactjs

Question

I'm using a React component called "EdiText". Right now, I can save the text, but if I refresh the page it goes back to its initial value. I want to save and keep the edited value even after a page refresh.
My code is the following:
const Project = ({ project, onDelete}) => {
const [value, setValue] = useState('')
const handleSave = (val) => {
console.log('Edited value ->', val);
setValue(val);
}
return (
<div>
<div className="project-component">
<EdiText
type="text"
className="project-title"
value={project.title}
onSave={handleSave}
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<br/>
<EdiText
type="textarea"
className="project-description"
value={project.description}
onSave={handleSave}
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<Link to={`/projectpage/${project.id}`} className="view-icon"><FaEye/></Link>
<FaTrash className="delete-icon" onClick={() => onDelete(project.id)}/>
</div>
</div>
)
}

Answer 1

You can use a custom hook for this.
// Hook
function useLocalStorage(key, initialValue) {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
try {
// Get from local storage by key
const item = window.localStorage.getItem(key);
// Parse stored json or if none return initialValue
return item ? JSON.parse(item) : initialValue;
} catch (error) {
// If error also return initialValue
console.log(error);
return initialValue;
}
});
// Return a wrapped version of useState's setter function that ...
// ... persists the new value to localStorage.
const setValue = (value) => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore =
value instanceof Function ? value(storedValue) : value;
// Save state
setStoredValue(valueToStore);
// Save to local storage
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
// A more advanced implementation would handle the error case
console.log(error);
}
};
return [storedValue, setValue];
}
Store it onto another file and import and use like this:
const [value, setValue] = useLocalStorage('')

Answer 2

You can use localStorage:
const handleSave = (val) => {
console.log('Edited value ->', val);
localStorage.setItem('value', val)
setValue(val);
}
And when the component first renders:
useEffect(() => {
const storedVal = localStorage.getItem('value')
if(storedVal) setValue(val)
}, [])

Answer 3

You could use localStorage:
const Project = ({ project, onDelete}) => {
const [value, setValue] = useState(localStorage.getItem('value'))
const handleSave = (val) => {
console.log('Edited value ->', val);
setValue(val);
localStorage.setItem('value', val)
}
return (
<div>
<div className="project-component">
<EdiText
type="text"
className="project-title"
value={project.title}
onSave={handleSave}
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<br/>
<EdiText
type="textarea"
className="project-description"
value={project.description}
onSave={handleSave}
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<Link to={`/projectpage/${project.id}`} className="view-icon"><FaEye/></Link>
<FaTrash className="delete-icon" onClick={() => onDelete(project.id)}/>
</div>
</div>
)
}