Error: Objects are not valid as a React child / can not map elements in my divs

Question

I got this error when I tried to map the data fetched through Axios:

Error: Objects are not valid as a React child (found: object with keys {id, title}). If you meant to render a collection of children, use an array instead.
    in span (at ProductList.js:64)
    in div (created by ItemMeta)
    in ItemMeta (at ProductList.js:63)
    in div (created by ItemContent)
    in ItemContent (at ProductList.js:61)
    in div (created by Item)
    in Item (at ProductList.js:58)
    in div (created by ItemGroup)
    in ItemGroup (at ProductList.js:55)
    in div (created by Container)
    in Container (at ProductList.js:38)
    in ProductList (created by Context.Consumer)
    in Route (at routes.js:10)
    in Hoc (at routes.js:8)
    in BaseRouter (at App.js:18)
    in div (at Layout.js:22)
    in CustomLayout (created by Connect(CustomLayout))
    in Connect(CustomLayout) (created by Context.Consumer)
    in withRouter(Connect(CustomLayout)) (at App.js:17)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:16)
    in App (created by Connect(App))
    in Connect(App) (at src/index.js:21)
    in Provider (at src/index.js:20)

here my related code for the components products:

import {
  Button,
  Container,
  Dimmer,
  Icon,
  Image,
  Item,
  Label,
  Loader,
  Message,
  Segment,
} from "semantic-ui-react";

import Axios from "axios";
import React from "react";
import { productListURL } from "../constants";

class ProductList extends React.Component {
  state = {
    loading: false,
    error: null,
    data: [],
  };
  componentDidMount() {
    this.setState({ loading: true });
    Axios.get(productListURL)
      .then((res) => {
        this.setState({ data: res.data, loading: false });
      })
      .catch((err) => {
        this.setState({ error: err, loading: false });
      });
  }
  render() {
    const { data, error, loading } = this.state;

    return (
      <Container>
        {error && (
          <Message
            negative
            header="there is error in your submission"
            content={JSON.stringify(error)}
          />
        )}
        {loading && (
          <Segment>
            <Dimmer active>
              <Loader>Loading</Loader>
            </Dimmer>

            <Image src="" />
          </Segment>
        )}
        <Item.Group divided>
          {data?.map((product) => {
            return (
              <Item key={product.id}>
                <Item.Image src={product.image} />

                <Item.Content>
                  <Item.Header as="a">{product.title}</Item.Header>
                  <Item.Meta>
                    <span className="cinema">{product.category}</span>
                  </Item.Meta>
                  <Item.Description>{product.description}</Item.Description>
                  <Item.Extra>
                    <Button primary floated="right" icon labelPosition="right">
                      Add to cart
                      <Icon name="cart plus" />
                    </Button>
                    <Label>{product.price}</Label>
                  </Item.Extra>
                </Item.Content>
              </Item>
            );
          })}
        </Item.Group>
      </Container>
    );
  }
}

export default ProductList;

I tried to add Fragment as well and put the key on Fragment but always getting the same error, I checked many similar questions and answers and tried to change the code but I receive always the same error any help will be too much appreciated, thank you

this is an update of the question according to some comments: here the console.log of data:

[]
length: 0
__proto__: Array(0)
ProductList.js:36 
(2) [{…}, {…}]
0:
category: {id: 1, title: "clothes"}
description: "a black T-shirt for men and women (unisex)"
discount_price: null
id: 1
image: "http://127.0.0.1:8000/media/duo.jpg"
price: 24
slug: "tshirt-black"
title: "Tshirt black"
__proto__: Object
1:
category: {id: 1, title: "clothes"}
description: "White T-shirt for men and women unisex"
discount_price: null
id: 2
image: "http://127.0.0.1:8000/media/2_00d6bb1f5b-asket_tee_white_cart_thumb-original.jpg"
price: 25
slug: "tshirt-white"
title: "Tshirt white"
__proto__: Object
length: 2
__proto__: Array(0)

Answer 1

Your product.category is an object ({id, title}). So you cannot simply display it. I'm guessing you want to display the category title? Try this:

  import {
      Button,
      Container,
      Dimmer,
      Icon,
      Image,
      Item,
      Label,
      Loader,
      Message,
      Segment,
    } from "semantic-ui-react";
    
    import Axios from "axios";
    import React from "react";
    import { productListURL } from "../constants";
    
    class ProductList extends React.Component {
      state = {
        loading: false,
        error: null,
        data: [],
      };
      componentDidMount() {
        this.setState({ loading: true });
        Axios.get(productListURL)
          .then((res) => {
            this.setState({ data: res.data, loading: false });
          })
          .catch((err) => {
            this.setState({ error: err, loading: false });
          });
      }
      render() {
        const { data, error, loading } = this.state;
    
        return (
          <Container>
            {error && (
              <Message
                negative
                header="there is error in your submission"
                content={JSON.stringify(error)}
              />
            )}
            {loading && (
              <Segment>
                <Dimmer active>
                  <Loader>Loading</Loader>
                </Dimmer>
    
                <Image src="" />
              </Segment>
            )}
            <Item.Group divided>
              {data?.map((product) => {
                return (
                  <Item key={product.id}>
                    <Item.Image src={product.image} />
    
                    <Item.Content>
                      <Item.Header as="a">{product.title}</Item.Header>
                      <Item.Meta>
                        <span className="cinema">{product.category.title}</span>
                      </Item.Meta>
                      <Item.Description>{product.description}</Item.Description>
                      <Item.Extra>
                        <Button primary floated="right" icon labelPosition="right">
                          Add to cart
                          <Icon name="cart plus" />
                        </Button>
                        <Label>{product.price}</Label>
                      </Item.Extra>
                    </Item.Content>
                  </Item>
                );
              })}
            </Item.Group>
          </Container>
        );
      }
    }
    
    export default ProductList;

Answer 2

HTML Content inside tags should be a string.

<p>Hello</p>
<a>Contact Us</a>

As mentioned , category key is not a string. It is an object with properties { id, title} . You are rendering it in a and React is throwing the same error. (Check second line in your error stack trace).

You can use the below code in your span :

<span className="cinema">{product.category.title}</span>