How do you map an array of objects within an object?

Question

I am trying to map an array of objects within an object and I can't seem to get it working. My code's goal is to map and then display the content within the "menu" array.

Here is the structure of the object (logged to console from a state).

Object {
  "id": 1,
  "img": "https://cuisinederue.org/wp-content/uploads/2019/08/Greg2.png",
  "menu": Array [
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Greg's Burger",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Poutine double cheese bacon",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Cône de poulet pop corn et frites maison",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Grilled cheese Philly steak",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Poutine Philly cheese steak",
      "price": 1,
    },
    Object {
      "description": "Les prix sont défini à la tête du client",
      "name": "Boulette de mac'n'cheese",
      "price": 1,
    },
  ],
  "name": "Greg's dinner",
  "type": "SOUTHERN COMFORT",
}

And here is the code that I'm trying to get to work: (specifically the details.menu.map part)


const Details = ({navigation, idTruck}) =>{
  const [details, setDetails] = useState([]);
  const [detailsDone, setDetailsDone] = useState(false);

  const getDetails = () => {  
    fetch("https://foodtrack-420kbc-lg.herokuapp.com/trucks/1").then(res => res.json()).then(resp => setDetails(resp));
  }

  if(!detailsDone)
  {
    getDetails();
    setDetailsDone(true);
  }
  console.log(details);
  return (
    <View style={styles.container}>
      <Header title='Details'></Header>
      <Image name="logo" style={styles.detailsImage} source={{uri: details.img}}></Image>
      <Text name="nom">{details.name}</Text>
      <Text name="style">{details.type}</Text>


        {


          details.menu.map(({description, name, price}) => 
            <View style={styles.container}>
              <Text name="nom">{name}</Text>
              <Text name="prix">{price}</Text>
              <Text name="desc">{description}</Text>
            </View>
          )
        }

    </View>
  )
}

The error I am getting is: TypeError: undefined is not an object (evaluating 'details.menu.map'

Any help is greatly appreciated!

Change like this details.menu.map((detail) => and <Text name="nom">{detail.name}</Text> — sibabrat swain
– sibabrat swain, Commented May 30, 2020 at 22:50
@sibabratswain sadly I still get the same error. Thanks for the suggestion though! — moltenmath
– moltenmath, Commented May 30, 2020 at 22:53
@sibabratswain yes, I'm still getting TypeError: undefined is not an object (evaluating 'details.menu.map' — moltenmath
– moltenmath, Commented May 30, 2020 at 22:58

Trần Đức Huy · Accepted Answer · 2020-05-30 23:21:44Z

1

You have big problem in controlling JS asynchronous. Please try to understand it first before you start to study reactJS. Some async functions: setTimeout, setInterval, Ajax (call api), here is small tut . From this point, you don't need to use detailsDone state.
High performance when use useEffect for calling api only 1 time.

const initValue = {
    id: 0,
    name: "",
    type: "",
    img: "",
    menu: []
}
const [details, setDetails] = useState(initValue); // init value is object, not array

React.useEffect(() => {
    fetch("https://foodtrack-420kbc-lg.herokuapp.com/trucks/1")
        .then(res => res.json())
        .then(resp => setDetails(resp));
}, []); // ensure call api run 1 time when this component render.

answered May 30, 2020 at 23:21

Trần Đức Huy

1042 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

moltenmath Over a year ago

You're right that my code isn't optimized however this didn't solve my problem sadly. Thanks for the tips and I will look into better learning async JS!

Ethan Lipkind · Accepted Answer · 2020-05-31 00:09:50Z

1

it looks like you're trying to map over details.menu, but when the component loads initially, details is an empty array, which does not have property menu.

One workaround would be to conditionally render something else (like a loading indicator) until the data is set into component state.

answered May 31, 2020 at 0:09

Ethan Lipkind

1,1565 silver badges7 bronze badges

1 Comment

moltenmath Over a year ago

Thank you, I ended up using a combination of this and the top answer!

Collectives™ on Stack Overflow

How do you map an array of objects within an object?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related