2

in the codesandbox link here i have a form with multiple inputs, i want to store the input value into localstorage of each one and everytime i refresh the page, the value of each one still there and of course, when it on change, the localstorage automatically update the value of each one as well, thank for help me out and have a good day, thank you :)

p/s: as you can see in this gif image gif,

i can store their values in the localstorage but i dont know how to retain the value on the input when page is refreshed and update it as well. my idea is to clone Medium and when user want to write new story, it automatically generate a new id in the url params, when input text onChange, the firebase realtime database will store event.target.value and keep it in the localstorage as well but when i refresh the page, the state of the text is gone and i dont know how to handle it, thank for taking time to help me, i really appreciate that

Improve this question
3
  • You know localstorage, and you should know how to read/write data from/to localstorage. What are you asking here now? Commented Sep 13, 2020 at 2:17
  • 1
    but i dont know how to set value to each input respectively from what i stored from localstorage Commented Sep 13, 2020 at 2:25
  • Probably you may have a unique ID for each input which will be the key when you save to storage. Commented Sep 13, 2020 at 2:26

2 Answers 2

Reset to default
3

You just need a function to set local storage to the input and give a unique key value to each input, so you don't override the existing value. Something like:

setValue = () => {
    localStorage.setItem(uniqueId, value)
}

Once you set the values, they won't be deleted after refreshing the page. If you want to retrieve those values at anytime, you just use localStorage.getItem(key). If what you want is to have the inputs previously written when you refresh the page, you need to have a state to store the initial value once the component mounts:

this.state = {
    input1: ' '
} 

componentDidMount() {
    this.setState({
        input1: localStorage.getItem(''inputValue1'')
    })
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

maybe input1: localStorage.getItem("inputValue1") || "" to handle null values
thank you so much, my problem was handled, have a good day
1

I hope this answers your query, the reason why you may not be able to set the prefilled values the input on reload because the input elements are not controlled input. In browser environment, there can be two types of inputs and actions for users controlled and uncontrolled, the input is controlled when you pass it a value attribute and tell it what shall be the value for it,

Whereas for an uncontrolled input will not require the value as an attribute. Whenever the user will enter a value the value will be reflected in the UI because the HTML input element will store it in its local state for visual feedback to the user.

The concept of controlled and uncontrolled inputs comes really handy in case when you are fetching some data via an API and then you have to auto-fill the inputs with some previously filled data from API. That time also you will need the input to be a controlled input. In your scenario the instead of API it in localStorage. I have updated your code sandbox link with my code. Please review it and share it if it does not work.

https://codesandbox.io/s/react-multiple-input-value-demo-forked-tf423?file=/src/Demo.js

Please find some of the reference links related to controlled and uncontrolled inputs:

https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

https://reactjs.org/docs/uncontrolled-components.html

https://www.robinwieruch.de/react-controlled-components

Improve this answer

6 Comments

Not sure why we need controlled vs uncontrolled here.
Because he was not able to persist the state on reload. He has the values in localStorage the only thing is even if he updates the state it will not reflect until the inputs are controlled.
He can store his data in localstorage means he has got already value attribute for this input. x)
No, it is not mandatory, he must be storing the value in localStorage from the onChange handler.
base on your demo, now i can handle my problem, it worked perfectly with what i expected with a slightly modification, thank you so much sincerely, hope you have a good day
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.