TypeError: players.map is not a function

Asked By: Anonymous

I have the following JSON array :-

    [
{"A":"Player","B":"Position","C":"Age","D":"Acc","E":"Wor","F":"Vis","G":"Tec","H":"Tea","I":"Tck","J":"Str","K":"Sta","L":"Pos","M":"Pen","N":"Pas","O":"Pac","P":"OtB","Q":"Nat","R":"Mar","S":"L Th","T":"Lon","U":"Ldr","V":"Jum","W":"Hea","X":"Fre","Y":"Fla","Z":"Fir","AA":"Fin","AB":"Dri","AC":"Det","AD":"Dec","AE":"Cro","AF":"Cor","AG":"Cnt","AH":"Cmp","AI":"Bra","AJ":"Bal","AK":"Ant","AL":"Agi","AM":"Agg"},
{"A":"Cyril Ruffier_YP22I ","B":"AM (R), ST (C)","C":"23","D":"14","E":"13","F":"12","G":"11","H":"14","I":"4","J":"13","K":"13","L":"8","M":"8","N":"11","O":"13","P":"15","Q":"8","R":"2","S":"4","T":"8","U":"12","V":"13","W":"8","X":"7","Y":"11","Z":"16","AA":"9","AB":"10","AC":"17","AD":"12","AE":"9","AF":"5","AG":"8","AH":"13","AI":"4","AJ":"18","AK":"10","AL":"11","AM":"7"},
{"A":"John Latouchent_YP26B ","B":"M (L), AM (RLC), ST (C)","C":"19","D":"15","E":"14","F":"10","G":"13","H":"14","I":"4","J":"10","K":"13","L":"12","M":"4","N":"13","O":"13","P":"12","Q":"11","R":"9","S":"4","T":"7","U":"10","V":"9","W":"9","X":"9","Y":"14","Z":"9","AA":"8","AB":"11","AC":"14","AD":"9","AE":"10","AF":"8","AG":"9","AH":"10","AI":"9","AJ":"17","AK":"11","AL":"14","AM":"12"}
]

and I am trying to map it so that I can display it in this component:-

import React from 'react';
import { getStickyState } from './Utils';

const PlayersDisplay = () => {
  const [players, setPlayers] = getStickyState([], 'players');

  return (
    <>
      {players && (
        <div className='attributesDisplay-container'>
          <div className='container'>
            {console.log(players)};
            {players.map((player) => {
              return <div>{player}</div>;
            })}
          </div>
        </div>
      )}
    </>
  );
};

export default PlayersDisplay;

This is my getStickyState function in my Utils component:-

export function getStickyState(defaultValue, key) {
  const [value, setValue] = useState(defaultValue);

  React.useEffect(() => {
    const stickyValue = window.localStorage.getItem(key);

    if (stickyValue !== null) {
      setValue(JSON.parse(stickyValue));
    }
  }, [key]);

  return [value, setValue];
}

and this is the setStickyState :-

export function setStickyState(defaultValue, key) {
  const [value, setValue] = useState(defaultValue);

  React.useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

The console.log is outputting the JSON array I posted here.

However players.map is throwing the error .map is not a function. I also tried JSON.parse(players) but to no avail.

Any help will be very much appreciated.

Thanks

Solution

Answered By: Anonymous

players is a string, not an array, seeing as console.log(players[0]) displays ‘[‘. I don’t know why, from the code, since you call JSON.parse. Perhaps you have saved the players array incorrectly to localstorage, for example by using JSON.stringify twice. We don’t have the code you used to store the data to localstorage.