I add data to localStorage like this:

 function handleSave(event) {
    let r = Math.random().toString(36).substring(7);
    const productInfo = {
      name: name,
      ean: ean,
      type: type,
      weight: weight,
      color: color,
      active: active,
    };
    // const productInfo2 = [name, ean, type, weight, color, active];
    localStorage.setItem(r, JSON.stringify(productInfo));
  }

I get localStorage mapped like this:

{Object.entries(localStorage).map(([key, value]) => {

        return (
          <div style={style.gridItemsContainer}>
            <p>{value}</p>
            <p>{value.name}</p>
            <p>{value.name}</p>
            <p>{value.name}</p>
            <p>{value.name}</p>
            <input checked={value.active} type="checkbox"></input>
            <Link to={'/products/' + key}>VIEW</Link>
            <Link to={'/products/' + key + '/edit'}>EDIT</Link>
            <button>DELETE</button>
          </div>
        );
      })}

In first paragraph i get this :

{"name":"kede","ean":"12","type":"baldas","weight":"20","color":"ruda","active":""}

Other <p> elements are empty How I need to edit my code so I could get values by keys like in example value.name

I add data to localStorage like this:

 function handleSave(event) {
    let r = Math.random().toString(36).substring(7);
    const productInfo = {
      name: name,
      ean: ean,
      type: type,
      weight: weight,
      color: color,
      active: active,
    };
    // const productInfo2 = [name, ean, type, weight, color, active];
    localStorage.setItem(r, JSON.stringify(productInfo));
  }

I get localStorage mapped like this:

{Object.entries(localStorage).map(([key, value]) => {

        return (
          <div style={style.gridItemsContainer}>
            <p>{value}</p>
            <p>{value.name}</p>
            <p>{value.name}</p>
            <p>{value.name}</p>
            <p>{value.name}</p>
            <input checked={value.active} type="checkbox"></input>
            <Link to={'/products/' + key}>VIEW</Link>
            <Link to={'/products/' + key + '/edit'}>EDIT</Link>
            <button>DELETE</button>
          </div>
        );
      })}

In first paragraph i get this :

{"name":"kede","ean":"12","type":"baldas","weight":"20","color":"ruda","active":""}

Other <p> elements are empty How I need to edit my code so I could get values by keys like in example value.name

• javascript
• reactjs
• local-storage

Share Improve this question Follow edited Jun 8, 2020 at 10:28 Emilis asked Jun 8, 2020 at 10:14 EmilisEmilis 16222 gold badges55 silver badges2424 bronze badges 3

• 1 localStorage.getitem('key') – bakar_dev Commented Jun 8, 2020 at 10:15
• I am mapping object entries of localsotarge, so where should I use .getitem() My localstorage keys are random keys. I need to display all of my products. – Emilis Commented Jun 8, 2020 at 10:20
• Don't understand how using localStorage,getItem('key') solves my problem – Emilis Commented Jun 8, 2020 at 10:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You are getting JSON string you need to parse it.

{Object.entries(localStorage).map(([key, valueJSON]) => {
       const value = JSON.parse(valueJSON);

        return (
          <div style={style.gridItemsContainer}>
            <p>{value}</p>
            <p>{value.name}</p>
            <p>{value.name}</p>
            <p>{value.name}</p>
            <p>{value.name}</p>
            <input checked={value.active} type="checkbox"></input>
            <Link to={'/products/' + key}>VIEW</Link>
            <Link to={'/products/' + key + '/edit'}>EDIT</Link>
            <button>DELETE</button>
          </div>
        );
      })}

Your lack I think is only because you need to JSON.parse it ;)

For getting the value from local storage is better to get that in constructor/ponentDidMount (if class ponent) or in a useEffect method (if functional ponent)

Example

function MyComp() {
  const [myLocalStorageData, setMyLocalStorageData] = useState({})
  useEffect(()=> {
    //logic for getting a value from local storage stored under the key 'key'
    const data = localStorage.getItem('key')
    setMyLocalStorageData(JSON.parse(data))
  },[])
  ....
}

Documentation:

https://developer.mozilla/en-US/docs/Web/API/Window/localStorage