Data Not Showing on Homepage - ReactJS-CodePudding

I am creating a reactjs application where I have a list of map that I want to iterate over and display those data on the homepage. I have created functional components for all files, extracted and import those that needs to. But the data is not showing up on the homepage even though I have imported it on the home file.

I tried doing it this way but it did not work and it does not display any error in the console.

Below are the excerpt of codes showing my attempts.

CardData Code is below:

const CardData = [
  {
    id: 1,
    img: 'https://images.pexels.com/photos/1758845/pexels-photo-1758845.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200',
    title: 'Web Design',
    desc: 'Lorem ipsum dolor sit amet, conse adipiscing elit. Phasellus enim erat, vestibulum vel.',
  },
  {
    id: 2,
    img: 'https://images.pexels.com/photos/1758845/pexels-photo-1758845.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200',
    title: 'Web Design',
    desc: 'Lorem ipsum dolor sit amet, conse adipiscing elit. Phasellus enim erat, vestibulum vel.',
  },
  {
    id: 3,
    img: 'https://images.pexels.com/photos/1758845/pexels-photo-1758845.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200',
    title: 'Web Design',
    desc: 'Lorem ipsum dolor sit amet, conse adipiscing elit. Phasellus enim erat, vestibulum vel.',
  },
  {
    id: 4,
    img: 'https://images.pexels.com/photos/1758845/pexels-photo-1758845.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200',
    title: 'Web Design',
    desc: 'Lorem ipsum dolor sit amet, conse adipiscing elit. Phasellus enim erat, vestibulum vel.',
  },
]

export default CardData

Card Container code is below:

import CardData from '../home/CardData'
import { useNavigate } from 'react-router-dom'

const CardContainer = () => {
  const navigate = useNavigate()
  return (
    // map over the CardData array and return a div for each item
    <div className='card'>
      {CardData.map((item) => {
        <div className='p-5 flex flex-col'>
          <div className='rounded-xl overflow-hidden'>
            <img
              src={item.img}
              alt={item.title}
              className='w-full h-40 sm:h-48 object-cover'
            />
          </div>
          <div className='py-5 px-6 sm:px-8'>
            <h2 className='text-xl sm:text-2xl text-gray-800 font-semibold mb-3'>
              {item.title}
            </h2>
            <p className='text-gray-500 leading-relaxed'>{item.desc}</p>
            <button className='button' onClick={() => navigate('/')}>
              View Details
            </button>
          </div>
        </div>
      })}
    </div>
  )

}
    
export default CardContainer;

Home file code is below:

import { Outlet } from 'react-router-dom'
import Navbar from '../../components/Navbar/Navbar'
import CardContainer from '../home/CardContainer'

const Home = () => (
  <>
    <Navbar />
    <section>

      <div className='flex items-center justify-center min-h-screen container mx-auto'>
        
        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>

          <CardContainer />

          <CardContainer />

          <CardContainer />
      
        </div>
      </div>
    </section>
    <Outlet />
  </>
)

export default Home

CodePudding user response：

your CardContainer does not return jsx it's only creating

you should use ==>(<></>) or ==>{... return(<></>)} instead of ==>{} to return a component, note also that when using map every returned element should have an unique key :

CardData.map((item,index) => (<div key={index}>...</div>)

CodePudding user response：

You missed return statement using map function, it should be like this:

import CardData from '../home/CardData'
import { useNavigate } from 'react-router-dom'

const CardContainer = () => {
  const navigate = useNavigate()
  return (
    // map over the CardData array and return a div for each item
    <div className='card'>
      {CardData.map((item) => {
        return (
        <div className='p-5 flex flex-col'>
          <div className='rounded-xl overflow-hidden'>
            <img
              src={item.img}
              alt={item.title}
              className='w-full h-40 sm:h-48 object-cover'
            />
          </div>
          <div className='py-5 px-6 sm:px-8'>
            <h2 className='text-xl sm:text-2xl text-gray-800 font-semibold mb-3'>
              {item.title}
            </h2>
            <p className='text-gray-500 leading-relaxed'>{item.desc}</p>
            <button className='button' onClick={() => navigate('/')}>
              View Details
            </button>
          </div>
        </div>)
      })}
    </div>
  )

}
    
export default CardContainer;

CodePudding user response：

  {
    CardData.map((item) => {
        return (