ReactJs retains multiple react values and do not reset state after being refreshed
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 
,
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
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/
- Order() in R - argument is missing, with no default
- How to plot geom_bar without showing multiple lines
- R: speeding up "group by" operations
- How to manipulate NetCDF-4 groups in R?
- How to convert categorial raster to mapped RGB values in R?
- How to add a hover-over tooltip to rhandonstable header cell?
- How to detect the right encoding for read.csv?
- Rcpp Rf_warningcall compiler warnings
- Modify the name of factor variables in lm function(summary function)
- Extreme value analysis and quantile estimation using log Pearson type 3 (Pearson III) distribution - R vs Python
- How to hide NAs when using xlsx::saveWorkbook?
- How do I retrieve a simple numeric value from a named numeric vector in R?
- Adding an image in navbar and adjusting alignment in Rmarkdown
- Matching pair-wise columns from left to right across rows in one dataframe to another dataframe and adding new columns with matching values
- Income to outcome flow chart in Sankey plotly R
- color mapping in geom_conn_bundle not showing correctly
- Print R package startup message AFTER automatic package conflict messages instead of before
- Summing a set of R dataframe rows (column-wise), while retaining the first n columns
- Added variable / partial regression plots for groups in an interaction?
- how to make a topoplot in R with coordinates variable distribution
- List of all functions in base R?
- Plotting multiple plots for different initial conditions in one graph
- Printing repetitively on the same line in R
- Generating UI/Server based on initial selection
- Subset dataframe based on pickerInput
- How to let user pick the data in R-shiny?
- Couldn't show my simple bar charts separately on Shiny R dashboardBody
- How to programmatically filter contents of a second shiny app displayed via iframe
- How to select specific interesting groups for the boxplot in R Shiny app?
- Crosstable and Plot grouping with reactive values