Objects are not valid as a React child, If you meant to render a collection of children, use an arra-CodePudding

I'm having issues accessing the data I need from an array, and keep getting the error message "Objects are not valid as a React child (found: object with keys {id, name, country, logo, flag, season, standings}). If you meant to render a collection of children, use an array instead."

I'd greatly appreciate any help as I'm very stuck.

export default {
  league: {
    id: 39,
    name: "Premier League",
    country: "England",
    logo: "https://media.api-sports.io/football/leagues/39.png",
    flag: "https://media.api-sports.io/flags/gb.svg",
    season: 2021,
    standings: [
      [
        {
          rank: 1,
          poster_path: "/iTQHKziZy9pAAY4hHEDCGPaOvFC.jpg",
          team: {
            id: 50,
            name: "Manchester City",
            logo: "https://media.api-sports.io/football/teams/50.png",
          },
          points: 93,
          goalsDiff: 73,
          group: "Premier League",
          form: "WDWWW",
          status: "same",
          description: "Promotion - Champions League (Group Stage)",
          all: {
            played: 38,
            win: 29,
            draw: 6,
            lose: 3,
            goals: {
              for: 99,
              against: 26,
            },
          },
          home: {
            played: 19,
            win: 15,
            draw: 2,
            lose: 2,
            goals: {
              for: 58,
              against: 15,
            },
          },
          away: {
            played: 19,
            win: 14,
            draw: 4,
            lose: 1,
            goals: {
              for: 41,
              against: 11,
            },
          },
          update: "2022-05-22T00:00:00 00:00",
        },
      ],
    ],
  },
};
------------


My component is as follows:
import React from "react";
import Chip from "@material-ui/core/Chip";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  chipRoot: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    flexWrap: "wrap",
    listStyle: "none",
    padding: theme.spacing(1.5),
    margin: 0,
  },
  chipSet: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexWrap: "wrap",
    listStyle: "none",
    padding: theme.spacing(1.5),
    margin: 0,
  },
  chipLabel: {
    margin: theme.spacing(0.5),
  },
}));

const TeamDetails = (props) => {
  const classes = useStyles();
  const teams = props.teams
  console.log(props.teams)

  return (
    <>
      <Typography variant="h5" component="h3">
        Overview
      </Typography>

      <Typography variant="h6" component="p">
        {teams.league}
      </Typography>
      <div className={classes.chipRoot}>
      <Paper component="ul" className={classes.chipSet}>
        <li>
          <Chip label="Genres" className={classes.chipLabel} color="primary" />
        </li>
        {teams.league.standings[0].map((g) => (
          <li key={g.points}>
            <Chip label={g.points} className={classes.chip} />
          </li>
        ))}
      </Paper>
      </div>
      </>
  );
};
export default  TeamDetails;

CodePudding user response：

This issue is teams.league is an object and that's what React is complaining about not being able to render.

Instead of following:

<Typography variant="h6" component="p">
  {teams.league}
</Typography>

it should be:

<Typography variant="h6" component="p">
  {teams.league.name}
</Typography>

Codesandbox: