How to .map() through an array of objects in React

Question

I'm trying to map through some data that looks like this:

[
{
  "id": "cambridgeshire",
  "name": "Cambridgeshire"
},
{
  "id": "bedfordshire",
  "name": "Bedfordshire"
}
]

And display it as a list.

I'm getting the error of allAreas is undefined. I have a feeling its because of the JSON Object which I'm unfamiliar with.

On checking the state of allAreas it shows undefined.

Heres the code Ive tried

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

To clarify this is an array of objects

The initial value of allAreas is an empty object useState({}). Use useState([]) — Titus
– Titus, Commented Feb 4, 2020 at 6:32
Ok I did that and now have the error allAreas is undefined. And Ive just checked the state of allAreas and it reads undefined. — DGB
– DGB, Commented Feb 4, 2020 at 6:37
can you please show a console.log of data returned from fetchAllAreasData? — Hardik Chaudhary
– Hardik Chaudhary, Commented Feb 4, 2020 at 6:39
[ { "id": "avon-and-somerset", "name": "Avon and Somerset" }, { "id": "bedfordshire", "name": "Bedfordshire" }, { "id": "cambridgeshire", "name": "Cambridgeshire" }, { "id": "cheshire", "name": "Cheshire Constabulary" }, { "id": "city-of-london", "name": "City of London" } ] — DGB
– DGB, Commented Feb 4, 2020 at 6:44
Hi @akhil, I'd like to clear this. No, an empty array wouldn't throw you an error when you try to map it. The problem here is the suppose to be an array of allAreas had turned into undefined. Because "undefined" have no map function. It threw an error — crrmacarse
– crrmacarse, Commented Feb 4, 2020 at 7:04

Ali Torki · Accepted Answer · 2020-02-04 06:54:52Z

Make sure the allArea exists before mapping.

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

If your problem didn't fix, use the useReducer instead because of some react problems in useState with arrays in sometimes.something like this:

function reducer(state = [], action) {
 return action;
}

const Directory = () => {
  const [allAreas, dispatch] = useReducer(reducer, []);

  useEffect(() => {
    fetchAllAreasData().then((data) => dispatch(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.length > 0 && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

crrmacarse · Accepted Answer · 2020-02-04 06:32:34Z

0

const [allAreas, setAllAreas] = useState([]); // your defaulted state must be [] instead of {}

answered Feb 4, 2020 at 6:32

crrmacarse

1,2461 gold badge10 silver badges24 bronze badges

3 Comments

DGB Over a year ago

Ok I did that and now have the error allAreas is undefined.

crrmacarse Over a year ago

It is probably the "data" response of your fetchAllAreasData. Have you tried checking that and confirm that it is an array object?

crrmacarse Over a year ago

was that inside the "then" of fetchAllAreasData? Try this to check if you got a responsefetchAllAreasData.then((data) => console.log(data))?

Shubham Nagota · Accepted Answer · 2020-02-04 06:33:13Z

0

Just change first line of the function to :

const [allAreas, setAllAreas] = useState([]);

answered Feb 4, 2020 at 6:33

Shubham Nagota

3142 silver badges16 bronze badges

Comments

CyberAbhay · Accepted Answer · 2020-02-04 07:08:16Z

0

It may be issue because your map function gets called before promise resolved and you get data.

To avoid this please check the length of 'allAreas' before iterating over it.

Also the intitial values assigned to 'allAreas' object instead of array. Change initial assignment to an array.

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.lenght && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

answered Feb 4, 2020 at 7:08

CyberAbhay

5346 silver badges18 bronze badges

Comments

Hardik Chaudhary · Accepted Answer · 2020-02-04 06:58:45Z

-1

try,

 <ul>
     {allAreas && allAreas.map((area) => (
         <li key={area.id}>{area.name}</li>
     ))}
 </ul>

answered Feb 4, 2020 at 6:58

Hardik Chaudhary

1,2281 gold badge10 silver badges26 bronze badges

1 Comment

BDL Over a year ago

Although this code might solve the problem, a good answer should also include what the code does and how it helps.

Collectives™ on Stack Overflow

How to .map() through an array of objects in React

5 Answers 5

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related