На моей домашней странице показаны рабочие карточки.
У меня есть массив, в котором хранятся ключи для моих рабочих карт, например:
{
id: 123,
position: 'Frontend Developer',
company: 'Apple Inc.',
date: 'Nov 17',
description: 'Lorem1 ipsum'
},
Когда по этой рабочей карте с идентификатором 123 нажимают на описаниереквизит этой работы (здесь: "Lorem1 ...") отображается под новым маршрутом / jobs /: id.
Ссылка на выбранную карточку вакансии выглядит следующим образом:
http://localhost:3000/jobs/kc6d22p
Проблема: Я использую uid () и не хочу получать TypeError после перезагрузки этого сайта описания (который я получаю, потому что при перезагрузке сайта изменился uid ()).
Мой вопрос: Как я могу сохранить и загрузить этоОписание prop с localalstorage () для решения моей проблемы?
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>)
}
}