Store prop data in local storage in react.js

Question

I'm working on a react library react-trello and trying to save the data to local storage.

My code:

 import React, {Component} from 'react'
 import Board from 'react-trello'
 import './App.css'

class NewCardForm extends Component {
  handleAdd = () => this.props.onAdd({title: this.titleRef.value, description: this.descRef.value, label: this.label.value})
  setTitleRef = (ref) => this.titleRef = ref
  setDescRef = (ref) => this.descRef = ref
  setLabelRef = (ref) => this.label = ref
  render() {
  const {onCancel} = this.props
  return (
   <div style={{background: 'white', borderRadius: 3, border: '1px solid #eee', borderBottom: '1px solid #ccc'}}>
    <div style={{padding: 5, margin: 5}}>
      <div>
        <div style={{marginBottom: 5}}>
          <input type="text" ref={this.setTitleRef} placeholder="User" />
        </div>
        <div style={{marginBottom: 5}}>
          <input type="text" ref={this.setDescRef} placeholder="Task Description" />
        </div>
        <div style={{marginBottom: 5}}>
          <input type="text" ref={this.setLabelRef} placeholder="Date" />
        </div>
      </div>
      <button onClick={this.handleAdd}>Add</button>
      <button onClick={onCancel}>Cancel</button>
    </div>
  </div>
    ) 
  }
}


 function App() {

  const data = {
   lanes: [
   {
    id: 'board1',
    title: 'Incompleted Tasks',
    current: "70", // custom property
    target: "100", // custom property
    label: 'First board here',
    cards: [
      {
        id: 'Card1',
        title: 'Abhishek',
        description: 'Thanks. Please schedule me for an estimate on Monday.'
      },
      {
        id: 'Card2',
        title: 'Rohan',
        description: 'Email received at 1:14pm'
      }
    ]
   },
   {
    id: 'board2',
    title: 'Completed Tasks',
    label: 'Second board here',
    current: "30", // custom property
    target: "100", // custom property
    cards: [
      {
        id: 'Card3',
        title: 'Rachit',
        description: 'You are welcome. Interested in doing business with you again',
       }
       ]
      }
    ]
  }

  localStorage.setItem('data', JSON.stringify(data));
  var retrievedObject = localStorage.getItem('data');
  console.log('data: ', JSON.parse(retrievedObject));

  return (
   <div className="app">
      <h1>Notion to organize</h1>
    <p>
      Your team’s long term memory, all in one spot.Organize anything, together.
    </p>

    <Board
      onDataChange={(newData) => {console.log(newData)}}
      onCardAdd={(card) => {localStorage.setItem('data', JSON.stringify(card));
                        var retrievedObject = localStorage.getItem('data');
                        console.log(retrievedObject)}}
      style={{backgroundColor: '#FFFEFC'}}
      canAddLanes
      editable
      laneDraggable
      laneStyle={{backgroundColor: '#F9F5F1', marginRight: '50px', paddingTop: '20px'}}
      cardDraggable
      draggable
      data={JSON.parse(retrievedObject)}
      collapsibleLanes
      components={{NewCardForm: NewCardForm}} 
    >
  
      </Board>
    </div>
  )
}

export default App

currently I'm rendering data to display board. I am calling onCardAdd event which triggers whenever data is changed in card. I am successfully able to get data inside card. but how can I save that data to local storage such that next time I refresh the page the data is there on browser.

you can find the library here.react-trello

Thank you for help.

Answer 1

come to it, you might not need cookie

What you need is a cookie.

Try using react-cookie or react-cookies that you find fancy.

if you use react-cookie while using class component, you will need to wrap your app in <CookiesProvider/> and use Higher order component withCookies() method.

you should try to use useEffect, where when you start your app, you should check your localStorage first if you have any data i.e. retrieve from that, and if you dont, you just start the new one.

Make sure you dont talk directly to localStorage but use a copy of retrievedObject by using useState so it can be responsive.

this is not complete work, but it gives you idea

Answer 2

You can use the React lifecycle componentDidmount and getItem from local storage there, then setState the data, and use it in your component.