Key not defined - React array map

Question

I'm modifying some code to use React Query rather than useEffect - see new code using React Query below:

import axios from 'axios';
import { useQuery } from '@tanstack/react-query'

function MembersList() {
  const { data } = useQuery(["members"], () => {
    return axios.get('http://localhost:3001/members').then((res) => res.data)
  })

  return (
    <div className="List">
      {data?.map((value, key) => {
        return (
          <div className="member">
            <div key={member_id}> {value.forename} {value.surname}</div>
          </div>
        );
      })}
    </div>
  );
}

export default MembersList;

I'm getting an error that 'member_id' is not defined - arising from the row where I try and add 'member_id' as a key (see below).

Error Message

'Member_id' is the first field in the array, see below JSON from Insomnia:

JSON showing the 'member_id field'

The error is clearly telling me to define 'member_id' but I'm not sure how or where specifically to do that.

If I remove the 'key={member_id}' then the code compiles and runs, but throws a warning that "Each child in a list should have a unique "key" prop.".

I've reviwed many similar issues on Stack Exchange and React docs, but still can't see why my code isn't working.

Answer 1

The thing you are getting back from the request is an object. An object can be thought of like a dictionary, you look up a word and it has a definition attached to it. member_id is just one of the words you can look up in this object. Right now, you don't specify what member_id is so javascript "thinks" it should be a variable that you defined, similar to data above. However, what you really want is the value of member_id that is present in the object. Therefore you should change it to value.member_id where value is one of the objects in your data list.

A visual way of thinking about it is like this

data = [{...}, {...}, ...];
value = data[0]; // this is what map is doing except for 0...N-1 where N is the length of your list
value;
> {...}
value.member_id;
> 1

Therefore, change your code to this:

import axios from 'axios';
import { useQuery } from '@tanstack/react-query'

function MembersList() {
  const { data } = useQuery(["members"], () => {
    return axios.get('http://localhost:3001/members').then((res) => res.data)
  })

  return (
    <div className="List">
      {data?.map((value, key) => {
        return (
          <div className="member" key={value.member_id}> // <<<
            <div> {value.forename} {value.surname}</div>
          </div>
        );
      })}
    </div>
  );
}

export default MembersList;