returning a nested object which is in an array using an api in react

Question

I am using an API with a Reactjs project this is a preview of an object from my API:

    {
    "id": "786e8fe8-ab7a-4659-8d89-7ca3d7aafa78",
    "owner": {
        "id": "19b70b73-94a4-4bb7-baf1-73103d793c91",
        "name": "John",
        "email": "[email protected]",
        "username": "John",
        "location": null,
        "short_intro": null,
        "bio": "",
        "profile_image": "/images/profiles/user-default.png",
        "social_github": null,
        "social_twitter": null,
        "social_linkedin": null,
        "social_youtube": null,
        "social_website": null,
        "created": "2021-08-12T21:04:41.277498Z",
        "user": 2
    },
    "tags": [
        {
            "id": "e76121ab-2397-4b75-993d-63d236d32530",
            "name": "Django",
            "created": "2021-08-12T23:31:15.681455Z"
        }
    ],
    "reviews": [
        {
            "id": "94e8682e-e73d-4df4-92ab-f9a71195ef90",
            "body": null,
            "value": "up",
            "created": "2021-08-22T07:54:39.070325Z",
            "owner": "19b70b73-94a4-4bb7-baf1-73103d793c91",
            "project": "786e8fe8-ab7a-4659-8d89-7ca3d7aafa78"
        }
    ],
    "title": "zain's 4 project",
    "description": "John project",
    "featured_image": "/images/unicrorn_fee_gwilI9S.PNG",
    "demo_link": null,
    "source_link": null,
    "vote_total": 1,
    "vote_ratio": 100,
    "created": "2021-08-20T05:39:17.087447Z"
}

While I'm able to get the id and the owner.name in my frontend I'm not able to get the tags object which is inside an array. If I try to get the tags by using a map function in React I get an error: Error: Objects are not valid as a React child (found: object with keys {id, name, created}). If you meant to render a collection of children, use an array instead.

Here is my React code:

import React, { useState, useEffect } from "react";
function Projects() {
    const [projects, setProjects] = useState([]);
    useEffect(() => {
        fetch("http://127.0.0.1:8000/api/projects/")
            .then((res) => {
                return res.json();
            })
            .then((res) => {
                setProjects(res);
            })
            .catch((err) => console.log(err));
    }, []);
    return (
        <section class="projectsList">
            {projects.map((project) => (
                <div class="container">
                    <div class="grid grid--three">
                        <div class="column">
                            <div class="card project">
                                <a
                                    href=""
                                    class="project"
                                >
                                    <img
                                        class="project__thumbnail"
                                        src=""
                                        alt="project thumbnail"
                                    />
                                    <div class="card__body">
                                        {project.title}
                                        <h3 class="project__title"></h3>
                                        <p>
                                            <a
                                                class="project__author"
                                                href=""
                                            >
                                                By
                                                {project.owner.name}
                                            </a>
                                        </p>
                                        <p class="project--rating">
                                            <span>{project.vote_ratio}%</span>
                                            <br />
                                            Positive Feedback ( Positive
                                            Feedback ({project.vote_total}) Vote
                                            {project.vote_total}
                                        </p>
                                        <div class="project__tags">
                                            {/*---Here is the problem---*/}
                                            {project.tags.map(tag => (

                                                <span class="tag tag--pill tag--main">
                                                <small>{tag}</small>
                                            </span>
                                                ))}
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </section>
    );
}

export default Projects;

How can I get the tags object which is inside an array?

You are already getting the object, eg tag in the map callback. React is complaining that you are trying to put that object directly in the element. Either build some html from your tag object, eg <div>{tag.name}</div> or stringify it if you just want to display the whole object for whatever reason — Patrick Evans
– Patrick Evans, Commented Aug 23, 2021 at 10:50

Chris · Accepted Answer · 2021-08-23 10:48:15Z

1

The project.tags property is a collection. This means that the Array#map function receives an Object as an argument in the callback function.

You should destructure this Object or use dot notation to get the correct property.

{project.tags.map(tag => (
    <span class="tag tag--pill tag--main">
    <small>{tag.name}</small>
  </span>
))}

Or

{project.tags.map(({ name }) => (
    <span class="tag tag--pill tag--main">
    <small>{name}</small>
  </span>
))}

answered Aug 23, 2021 at 10:48

Chris

6,6911 gold badge25 silver badges27 bronze badges

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

Comments

andy mccullough · Accepted Answer · 2021-08-23 10:48:41Z

1

You are trying to output the whole tag object when you do -

<small>{tag}</small>

You need to access a single (primitive) property on tag instead, e.g. -

<small>{tag.name}</small>

answered Aug 23, 2021 at 10:48

andy mccullough

9,6817 gold badges38 silver badges64 bronze badges

Comments

Erfan · Accepted Answer · 2021-08-23 10:49:11Z

You are mapping the tags, each tag is an object with three properties: id,name,created. you can display each of them with tag.id, tag.name,... . but you cannot pass a whole object to be rendered inside a react element.

                                    <div class="project__tags">
                                        {/*---Here is the problem---*/}
                                        {project.tags.map(tag => (

                                            <span class="tag tag--pill tag--main">
                                            <small>{tag.name}</small>
                                            <small>{tag.id}</small>
                                            <small>{tag.created}</small>

                                        </span>

Sanoodia · Accepted Answer · 2021-08-23 10:49:06Z

-1

by this

{project.tags.map(tag => (

     <span class="tag tag--pill tag--main">
     <small>`ID: ${tag.id}, Name: ${tag.name}, Created: ${tag.created}`</small>
     </span>
    ))}

answered Aug 23, 2021 at 10:49

Sanoodia

9254 silver badges9 bronze badges

Collectives™ on Stack Overflow

returning a nested object which is in an array using an api in react

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related