How to print JSON data with map in array React component

Question

I have an array like this in React data file and I'm using the .map() method to load JSON data in component ProjectItem.js.

What is the most efficient way to print nested JSON object? I now want to print the title in projects array so I can debug it, show it on browser. I can't see <div className="title"></div> in inspector, what is the right function?

Data.json

{
"projects": [
    {
        "title": "Projecttitle1",
        "category": "frontend development",
        "description": "",
        "desktop": [],
        "mobile": []
    }
  ]
}

ProjectItem.js

import React from 'react';
import './ProjectItem.scss';
import useWindowWidth from '../../Hooks/useWindowWidth.js';
import { projects } from '../../data'

import desktopImage from '../../Assets/Images/Projects/Desktop/123.jpg';
import mobileImage from '../../Assets/Images/Projects/Mobile/123_square.jpg'


const ProjectItem = ({ viewProject }) => {

const imageUrl = useWindowWidth() >= 650 ? desktopImage : mobileImage;

const { windowWidth } = useWindowWidth();
return(
    <div className="projectItem" style={{ backgroundImage: `url(${ imageUrl })`}}>
        {windowWidth >= 650 &&( 
            <>
            <div className="title">
                {projects.map((data, key)=>{
                        console.log(key);
                    return(
                        <div key={key}>
                        {data.title}
                        </div>
                    );
                })} 
            </div>
            <div className="viewProject">{viewProject}</div>
            </>
        )}  
    </div>
    );
}; 

export default ProjectItem

Console:

empty

Are you getting data in projects? Can put log before map and check once? — Darshna Rekha
– Darshna Rekha, Commented Oct 2, 2020 at 6:10
Hi Darshna, I've tried {console.log(json.projects.title)} and ` {console.log(projects[0].title)}` to check once, no log data appears :( — inhyechoi
– inhyechoi, Commented Oct 2, 2020 at 19:58
I tried {console.log("title" + projects[0].title)} and log data Projecttitle1 appears on console, please if someone can put me on right track to print using map function — inhyechoi
– inhyechoi, Commented Oct 2, 2020 at 20:20

zrna · Accepted Answer · 2020-10-02 13:41:05Z

I assume that import { projects } from '../../data' is something like this:

export const data = {
  projects: [
    {
      title: "Project title 1",
      category: "frontend development",
      description: "",
      desktop: [],
      mobile: []
    }
  ]
};

So when you map this object, you need to reference to the projects property like this data.projects.map().

Example:

data.js

export const data = {
  projects: [
    {
      title: "Project title 1",
      category: "frontend development",
      description: "",
      desktop: [],
      mobile: []
    },
    {
      title: "Project title 2",
      category: "frontend development",
      description: "",
      desktop: [],
      mobile: []
    }
  ]
};

App.js

import React from "react";

import { data } from "./data";

export default function App() {
  return (
    <div>
      {data.projects.map((project, key) => {
        return <p key={key}>{project.title}</p>;
      })}
    </div>
  );
}

I created codesandbox too.

Collectives™ on Stack Overflow

How to print JSON data with map in array React component

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