When the pushFrontBtn is clicked an emoji add to the front of the localStorage array, and when pushBackbtn is clicked an emoji is added to the back of the localStorage array. This aspect of the app is working as it should.

The focus of my question is on removeFront() function which removes the index item from the array shift(), and removeEnd() function which removes the last item from array. Both functions are working, but is the syntax used ideal when managing - updating the state and removing items from localStorage?

import {React, useState} from 'react';

function App() {

  const [, setEmjoiArr] = useState([])
  const [inputValue, setInputValue] = useState({ value: ""})

 // set localStorage key
  const LOCAL_VALUE = "emojis";

  //getLocal() is a utility function which retrieves from localStorage
  // or returns the default array if nothing is in localStorage, and parse the JSON
  const getLocal = (key) => {
     return JSON.parse(localStorage.getItem(key) || "[]");
  }

  // setLocal() is a utility function that passes a key and value which the key can later be used to 
  // to retrieve value(s) from localStorage
  const setLocal = (key, value) => {
     localStorage.setItem(key, JSON.stringify(value));
  }

  // EmjoiValues retrieves localStorage using the key declared above "LOCAL_VALUE"
  const EmjoiValues = getLocal(LOCAL_VALUE)

  // passes all EmjoiValues items from localStorage and includes new value from input field
  // then assigns to updateEmjoiArr
  let updateEmjoiArr = []

  // console.log(EmjoiValues)

  const pushFrontBtn = () => {
    setEmjoiArr((prev) => [inputValue.value, ...prev])

    //updateEmjoiArr so that new items will be add at beginning of array
    updateEmjoiArr = [inputValue.value, ...EmjoiValues]
    setLocal(LOCAL_VALUE, updateEmjoiArr)

    setInputValue({value: ""})
  }

  const pushBackBtn = () => {
    setEmjoiArr((prev) => [...prev, inputValue.value])

    //updateEmjoiArr so that new items will be add at end of array
    updateEmjoiArr = [...EmjoiValues, inputValue.value]
    setLocal(LOCAL_VALUE, updateEmjoiArr)

    setInputValue({ value: "" })
  }


  const removeFront = () => {
//IS THIS SNYTAX CORRECT FOR REMOVING FIRST ITEM FROM ARRAY LOCALSTORAGE?
   let [first,...rest] = EmjoiValues
   
   setEmjoiArr((prev) => [...prev, rest])
   setLocal(LOCAL_VALUE, rest)
  }

  const removeEnd = () => {
   //IS THIS SNYTAX CORRECT FOR REMOVING LAST ITEM FROM ARRAY LOCALSTORAGE?
   EmjoiValues.splice(-1, 1)

   setEmjoiArr((prev) => [...prev, EmjoiValues])
   updateEmjoiArr = [EmjoiValues]
  setLocal(LOCAL_VALUE, updateEmjoiArr)

  }


  const handleChange = event => {
    const {name, value} = event.target;
    setInputValue(prev => {
      return {
        ...prev,
        [name]: value
      }
    })
  }

   const emojiItems = EmjoiValues.map((emoji) => {
     return <li key={emoji}>{emoji}</li>
   })

  
  return (
    <main>
      <ul>{emojiItems}</ul>
      <input
        className="emjoi-input"
        name="value"
        type="text"
        value={inputValue.value}
        onChange={handleChange}
      />

      <div className="buttonContainer">
        <button className="push-front-btn" onClick={pushFrontBtn}>
          Add Emoji to Front
        </button>
        <button className="push-back-btn" onClick={pushBackBtn}>
          Add Emoji to End
        </button>
      </div>

      <div className="buttonContainer">
        <button className="shift-btn" onClick={removeFront}>
          Remove Front Emoji
        </button>
        <button className="pop-btn" onClick={removeEnd}>
          Remove End Emoji
        </button>
      </div>
    </main>
  )
}

export default App;```

CodePudding user response：

setLocal is setting an empty value in the case that you are trying to remove. and that key will live cross sessions, if you want to remove it use

localStorage.removeItem('name');

CodePudding user response：

sorry, I missundertand your question:

  const removeFront = () => {
   let [first,...rest] = EmjoiValues   
   setEmjoiArr(rest)
   setLocal(LOCAL_VALUE, rest)
  }

  const removeEnd = () => {   
   EmjoiValues.splice(-1, 1)
   setEmjoiArr(EmjoiValues)
   setLocal(LOCAL_VALUE, EmjoiValues)
  }