1

I have a problem with the getItem of my localStorage in my React Form. I put a onChange attribute:

I found the setItem function to store the data in. Here is the function:

 function save_data(){

  let textarea =  
document.querySelectorAll("textarea")
  let input = 
document.querySelectorAll("input[type='text']")
  let saved_fields = []
                                                          
textarea.forEach(x => {

 saved_fields.push({
 key: x.className,
 value: x.value
 })
                                  
})
                          
 input.forEach(x => {
 saved_fields.push({
 key: x.className,
 value: x.value
 })
                                
})
                              
 localStorage.setItem("saved_data", 
 JSON.stringify(saved_fields))

 }

My main problem is that I don't find a way to put the data back to the page after the page reload. I just found out how to persist all my inputs in the console:

window.onload = dataLoad();
                            
function dataLoad () {

 let show_saved_data = 

localStorage.getItem("saved_data");

  console.log('show_saved_data:',JSON.parse(show_saved_data));

   }

Can you guys help me find the retrieve/persist data function?

Here is the html of the form, i use props from another component. I don't know if this can change the function i need to use.

<InputFields 
   stateKey = 'contactInfo' 
   key = {props.contactInfo.id}
   completedFields = 
{props.contactInfo}
     templateFields = {props.templates.contactInfo}
 onDataEntry = {props.onDataEntry}
   newField = {props.newField}
 />