Render array of objects from Mongoose in React

Question

I use node js + React. I have data that cames from mongoose which usually have this format:

{
  "_id": "61b711721ad6657fd07ed8ae",
  "url": "/esports/match/natus-vincere-vs-team-liquid-14-12",
  "dataInfo1param1": [
    [
      {
        "oddTitle": "Winner",
        "odddTitle": "FadeGaming | okura",
        "oddvalue": "2.58 | 1.48 | 13 09:28:12//2.71 | 1.44 | 13 12:25:37"
      }
    ]
  ]
}

In MatchCard.js component I have correctly passed match data from my node js router, but I can't output it on react page. Here component code

import React from 'react';

export const MatchCard = ({ match }) => {
  return (
    <div>
      <p>{match.url}</p>
      <p>{match.dataInfo1param1}</p>
    </div>
  );
};

match.url value outputs correctly. But match.dataInfo1param1 throw error Error: Objects are not valid as a React child (found: object with keys {oddTitle, odddTitle, oddvalue}). If you meant to render a collection of children, use an array instead.

I tried to output { match.dataInfo1param1['oddTitle'] } but it show empty value...

So the question is how to output array key values for both oddTitle and oddvalue? Maybe I should map them and then render them in a different way?

Thanks

MagnusEffect · Accepted Answer · 2021-12-14 07:25:31Z

1

since dataInfo1param1 is an array , you can access the value oddTitle like this

{ match.dataInfo1param1[0][0].oddTitle }

Remove one [0] if the above line doesn't work.

answered Dec 14, 2021 at 7:25

MagnusEffect

3,9954 gold badges28 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Render array of objects from Mongoose in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related