why my map does not work properly and does not show all the items?

Question

I am mapping over my items but every time I just get the one item. And also my image does not load properly. If anyone can help me to solve this problem I would be gratful.

import React from 'react'
import './portfolio.css'

            const Portfolio = ({ items }) => {
            return (
                <>
                    {items && items.map((item) => {
                        const { id, img, firstMedia, secondMedia, mediaUrl, mediaName } =item;
                        return (
                            <section id={"portfolio"} >
                                <h5>My Recent Works</h5>
                                <h2>Portfolio</h2>
                                <div className={"container portfolio__container"} >
                                    <article className={"portfolio__item"} >
                                        <div className={"portfolio__item-image"} key={id}>
                                            <img src={item.img} />
                                        </div>
                                        <h3>This is a portfolio item title</h3>
                                        <div className={"portfolio__item-cta"}>
                                            <a href={item.firstMedia.mediaUrl} className= 
                                           {'btn'} target={'_blank'} > 
                                            {item.firstMedia.mediaName}</a>
                                            <a href={item.secondMedia.mediaUrl} className= 
                                            {'btn btn-primary'} target={"_blank"}> 
                                             {item.secondMedia.mediaName}</a>
                                        </div>
                                    </article>
                                </div>
                            </section>
                        )
                    })}
                </>
            )
        }
            export default Portfolio

This is the App.js file which contains all of the components.

            import React, { useState } from "react";
            import Header from "./components/header/Header";
            import Nav from "./components/nav/Nav";
            import About from "./components/about/About";
            import Experience from "./components/experience/Experience";
            import Services from "./components/services/Services";
            import Portfolio from "./components/portfolio/Portfolio";
            import Contact from "./components/contact/Contact";
            import Footer from "./components/footer/Footer";
            import data from "../src/components/portfolio/data";


              const App = () => {
              const [item, setItems] = useState(data);
          return (
            <>
              <Header />
              <Nav />
              <About />
              <Experience />
              <Services />
              <Portfolio items={item} {...item}/>
              <Footer />
            </>
          );
        };

        export default App;

These are my datas. I checked the datas of the images and they are correct. But my images do not load properly.

            const data = [{
            id: 1,
            img: "../../assets/portfolio1.jpg",
            firstMedia: {
                mediaName: "Github",
                mediaUrl: "https://github.com",

            },
            secondMedia: {
                mediaName: "dribble",
                mediaUrl: "https://dribbble.com"
            },
            id: 2,
            img: "../../assets/portfolio2.jpg",
            firstMedia: {
                mediaName: "Github",
                mediaUrl: "https://github.com",

            },
            secondMedia: {
                mediaName: "dribble",
                mediaUrl: "https://dribbble.com"
            },
            id: 3,
            img: "../../assets/portfolio3.jpg",
            firstMedia: {
                mediaName: "Github",
                mediaUrl: "https://github.com",

            },
            secondMedia: {
                mediaName: "dribble",
                mediaUrl: "https://dribbble.com"
            },
            id: 4,
            img: "../../assets/portfolio4.jpg",
            firstMedia: {
                mediaName: "Github",
                mediaUrl: "https://github.com",

            },
            secondMedia: {
                mediaName: "dribble",
                mediaUrl: "https://dribbble.com"
            },
            id: 5,
            img: "../../assets/portfolio5.jpg",
            firstMedia: {
                mediaName: "Github",
                mediaUrl: "https://github.com",

            },
            secondMedia: {
                mediaName: "dribble",
                mediaUrl: "https://dribbble.com"
            },
            id: 6,
            img: "../../assets/portfolio6.jpg",
            firstMedia: {
                mediaName: "Github",
                mediaUrl: "https://github.com",

            },
            secondMedia: {
                mediaName: "dribble",
                mediaUrl: "https://dribbble.com"
            },
        }]

        export default data;

Answer 1

First, Your data structure is not right. You're not including secondMedia in the data object and you're not creating a new object after the first ends.

Here's how it should be:

const data = [{
  id: 1,
  img: '../../assets/portfolio1.jpg',
  firstMedia: {
    mediaName: 'Github',
    mediaUrl: 'https://github.com',

  },
  secondMedia: {
    mediaName: 'dribble',
    mediaUrl: 'https://dribbble.com',
  },
}, {
  id: 2,
  img: '../../assets/portfolio2.jpg',
  firstMedia: {
    mediaName: 'Github',
    mediaUrl: 'https://github.com',

  },
  secondMedia: {
    mediaName: 'dribble',
    mediaUrl: 'https://dribbble.com',
  },
}, {
  id: 3,
  img: '../../assets/portfolio3.jpg',
  firstMedia: {
    mediaName: 'Github',
    mediaUrl: 'https://github.com',

  },
  secondMedia: {
    mediaName: 'dribble',
    mediaUrl: 'https://dribbble.com',
  },
}, {
  id: 4,
  img: '../../assets/portfolio4.jpg',
  firstMedia: {
    mediaName: 'Github',
    mediaUrl: 'https://github.com',

  },
  secondMedia: {
    mediaName: 'dribble',
    mediaUrl: 'https://dribbble.com',
  },
}, {
  id: 5,
  img: '../../assets/portfolio5.jpg',
  firstMedia: {
    mediaName: 'Github',
    mediaUrl: 'https://github.com',

  },
  secondMedia: {
    mediaName: 'dribble',
    mediaUrl: 'https://dribbble.com',
  },
}, {
  id: 6,
  img: '../../assets/portfolio6.jpg',
  firstMedia: {
    mediaName: 'Github',
    mediaUrl: 'https://github.com',

  },
  secondMedia: {
    mediaName: 'dribble',
    mediaUrl: 'https://dribbble.com',
  },
}];

Second, I'd suggest mapping over items and rendering a Portfolio component.

// App.js
  const [items, setItems] = useState(data);
  return (
    <>
      {items.map((portfolio) => (
        <Portfolio key={portfolio.id} {...portfolio} />
      ))}
    </>
  );

// Portfolio.js
const Portfolio = (props) => {
  const { id, img, firstMedia, secondMedia, mediaUrl, mediaName } = props;

  return (
    <section id={`portfolio-${id}`}>
      <h5>My Recent Works</h5>
      <h2>Portfolio</h2>
      <div className={"container portfolio__container"}>
        <article className={"portfolio__item"}>
          <div className={"portfolio__item-image"} key={id}>
            <img src={img} />
          </div>
          <h3>This is a portfolio item title</h3>
          <div className={"portfolio__item-cta"}>
            <a href={firstMedia.mediaUrl} className={"btn"} target={"_blank"}>
              {firstMedia.mediaName}
            </a>
            <a
              href={secondMedia.mediaUrl}
              className={"btn btn-primary"}
              target={"_blank"}
            >
              {secondMedia.mediaName}
            </a>
          </div>
        </article>
      </div>
    </section>
  );
};