How to fetch a value of key from localStorage and put it to input by hooks?

user_16823062 0
Viewed 56

Sorry, I've only started learn hooks. I can't correctly write it: on page load, must be fetched from localStorage a value of key appData and puts it in the input.

import './App.css';
import { useState, useEffect } from 'react';

export default function App() {
  const [appData, setValue] = useState('');
  
  useEffect(() => localStorage.setItem('appData', appData), [appData]);
 
  return (
    <div>
      React Marathon, appData: <input size='5' defaultValue={appData}></input>
    </div>
  );
}
use-effect react-hooks reactjs
2 Answers

Just set the initial value to the localStorage value

const [appData, setValue] = useState(localStorage.getItem('appData') || '')
user_20826730 
import './App.css';
import { useState, useEffect } from 'react';
export default function App() {  
  const [appData, setValue] = useState("");

  useEffect(() => {
    if(!localStorage.getItem('appData')) {
      localStorage.setItem('appData', appData)
    }
  }, []);
  useEffect(() => setValue(localStorage.getItem('appData')), []);

  return (
    <div>
      React Marathon, appData: <input size='5' defaultValue={appData}></input>
    </div>
  );
}
user_168230620
Related