useEffect not working with local storage and forEach-CodePudding

In my project, I am working with the redux store and that data will store in local storage. On every new update, local storage will update and as per local storage, my component will render with forEach method.

With the below code, I am getting the data from local storage.

const ShowMyFlashcard = () => {
let cardValueObj=[]

 useEffect(() => {

    let cardValue = localStorage.getItem("cardValue");
    if (cardValue == null) {
      cardValueObj= [];
    } else {
      cardValueObj= JSON.parse(cardValue);
    }
  });


 return (
    //  {/* SECTION TO SHOW CREATED ALL CARDS*/}

    <div className="mx-10 my-10 grid grid-cols-3 gap-4 place-content-around flex flex-wrap justify-items-center">
      {cardValueObj.forEach((element) => {
        <div className=" shadow-md bg-white p-5 h-64 w-64 m-4 mx-1.5 my-1.5">
          <div>
            <h1 className="text-center font-bold mx-1.5 my-1.5">
              {element.createGroup}
            </h1>
            <div className="text-center bg-white mx-1.5 my-1.5 h-32 w-48">
              <span>{element.groupDescription}</span>
            </div>
            <div className="flex justify-center">
              <button className="rounded-md text-red-600 border-solid border-2 bg-white border-red-700 mx-2 my-2 h-8 w-40">
                View Cards
              </button>
            </div>
          </div>
        </div>;
      })}
    </div>
  );
};

export default ShowMyFlashcard;

CodePudding user response：

You haven't passed any dependency array

useEffect(() => {
   let cardValue = localStorage.getItem("cardValue");
   if (cardValue == null) {
     cardValueObj= [];
   } else {
     cardValueObj= JSON.parse(cardValue);
   }}, []);

Do add some dependency in the array. Also using let is not a proper way try using the useState Hook

CodePudding user response：

.forEach() has no return value, so that operation doesn't output anything to the page. Use .map() instead.

Additionally, the callback to your .forEach() never returns anything. When you use .map(), also make sure the callback returns the value you want.

{cardValueObj.map((element) => (
  <div className=" shadow-md bg-white p-5 h-64 w-64 m-4 mx-1.5 my-1.5">
    the rest of your markup...
  </div>;
))}

Or with an explicit return:

{cardValueObj.map((element) => {
  return (<div className=" shadow-md bg-white p-5 h-64 w-64 m-4 mx-1.5 my-1.5">
    the rest of your markup...
  </div>);
})}