我如何 map 反应 js 中的一个数组我试过了但是有一些问题谁能帮我

Question

So I try to get data from localDataStorage and try to populate on screen in react but the react is showing error `[{',' expected" in place of '.' in jsx line localStorageData.iength or if i remove this from code than it's showing same error for 'localDataStorage.map' it asking me to remove '.'

import { useEffect, useState } from "react";
import "./inbox.css";
 
const Inbox = () => {
  const [localStorageData, setlocalStorageData] = useState([])

  useEffect =(()=>{
    JSON.parse(localStorage.getItem('todos')).then(data=> setlocalStorageData(data))
  }, [localStorageData])

  return (
    {localStorageData.length > 0 &&
       localDataStorage.map((element, index) => (
        <div className="inbox" key ={index}>
          <div className="bullet">&#x27A3;</div>
          <div className="msg">{element.message}</div>
          <div className="btn-container">
            <div className="date">{element.title}</div>
            <div className="edit btn hide">
              <i className="fa-solid fa-pen-to-square"></i>
            </div>
            <div className="delete btn hide">
              <i className="fa-solid fa-trash"></i>
            </div>
          </div>
        </div>
      ))
    }
  )
}

export default Inbox;

the error is as following

[{ "resource": "/C:/Users/PC/Desktop/web/new/src/component/inbox/inbox.js", "owner": "typescript", "code": "1005", "severity": 8, "message": "',' expected.", "source": "ts", "startLineNumber": 14, "startColumn": 22, "endLineNumber": 14, "endColumn": 23 }]

Answer 1

Remove the outer braces in your return statement. Braces like this are only used inside JSX.

Also, you probably meant .length instead of .iength .

Answer 2

i believe there should be localStorageData.map and not localData.map

Answer 3

import React from "react"
import { useEffect, useState } from "react"
import "./inbox.css"

const Inbox = () => {
  const [localStorageData, setlocalStorageData] = useState([])

  useEffect =
    (() => {
      JSON.parse(localStorage.getItem("todos"))
        .then(data => setlocalStorageData(data))
        .catch(err => console.log(err))
    },
    [localStorageData])

  return (
    <>
      {localStorageData.length > 0 &&
        localStorageData.map((element, index) => (
          <div className="inbox" key={index}>
            <div className="bullet">&#x27A3;</div>
            <div className="msg">{element.message}</div>
            <div className="btn-container">
              <div className="date">{element.title}</div>
              <div className="edit btn hide">
                <i className="fa-solid fa-pen-to-square"></i>
              </div>
              <div className="delete btn hide">
                <i className="fa-solid fa-trash"></i>
              </div>
            </div>
          </div>
        ))}
    </>
  )
}

export default Inbox

Answer 4

you are not wrapping code into single element try

return (
    <>
    {
      localStorageData.length > 0 &&
        localData.map((element, index) => (
          <div className="inbox" key={index}>
            <div className="bullet">&#x27A3;</div>
            <div className="msg">{element.message}</div>
            <div className="btn-container">
              <div className="date">{element.title}</div>
              <div className="edit btn hide">
                <i className="fa-solid fa-pen-to-square"></i>
              </div>
              <div className="delete btn hide">
                <i className="fa-solid fa-trash"></i>
              </div>
            </div>
          </div>
        ))
    }
    </>
  )