Save information from array in localstorage

Question

My homepage shows job cards.

I have an array that stores keys for my job cards like this:

{
    id: 123,
    position: 'Frontend Developer',
    company: 'Apple Inc.',
    date: 'Nov 17',
    description: 'Lorem1 ipsum'
},

When this job card with the id 123 is clicked the description prop of that job (here: "Lorem1...") is shown under a new route /jobs/:id.

The link of a clicked job card looks like this:

http://localhost:3000/jobs/kc6d22p

The problem: I am using uid() and don't want to get a TypeError once I reload this description site (which I get because on site reload the uid() has changed).

My question: How can I save & load this description prop with localstorage() in order to solve my problem?

App.js:

import React, {Component} from 'react'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import Home from './Home'
import Description from './Description'
import {jobs} from '../service'

export default class App extends Component {
    render(){
        return(<Router><React.Fragment><Route exact path = "/" render = {() => <Home jobs = {jobs}/>} /><Route path = "/jobs/:id" render = {({match}) => (<div><Description job = {jobs.find(job => job.id === match.params.id)}/> </div>)}/> </React.Fragment> </Router>)
    }
}

Description.js:

import React, {Component} from 'react'
import styled from 'styled-components'

const Wrapper = styled.p `
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      margin: 30px auto;
      padding: 25px;
      background: white;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 8px 16px rgba(180, 180, 180, 0.4);
    `

export default class Description extends Component {
    render() {
        const {job} = this.props
        return (<Wrapper><p>{job.description} </p> </Wrapper>)
    }
}

Answer 1

Convert your object to a JSON.stringify(object) string, store in localStorage.

Later fetch your string, and convert back to object using JSON.parse(string)

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Does that solve your problem?