Props undefined when passed to component

June 12, 2022

Trying to pass dummy data to a component, props get passed as undefined and even console.log() inside the same page does not work? could someone please tell whats wrong here

import AllPosts from "../../components/posts/all-posts"

var DUMMY_POST = [
    {
        title: 'ter',
        slug:'getting-starterd',
        image:'getting-started-nextjs.png',
        excerpt: 'nkjadnknsdk,nsdikns',
        date: '2022-06-12'
    },
    {
        title: 'ter',
        slug:'getting-starterd-by',
        image:'nextjs-file-based-routing.png',
        excerpt: 'nkjadnknsdk,nsdikns',
        date: '2022-06-12'
    }
]
function AllPostsPage() {
    console.log(DUMMY_POST)
    return <AllPosts posts={DUMMY_POST}/>
}
export default AllPostsPage

_app.js file

import '../styles/globals.css'
import Layout from '../components/layout/layout'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
    <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

all-posts file

import classes from './all-posts.module.css'
import PostsGrid from './posts-grid'

function AllPosts(props) {
    // console.log(props)
    return (
    <section className={classes.posts}>
        <h1>All posts</h1>
        <PostsGrid posts={props.posts} />
    </section>
    )
}
export default AllPosts()

>Solution :

import classes from './all-posts.module.css'
import PostsGrid from './posts-grid'

function AllPosts(props) {
    // console.log(props)
    return (
    <section className={classes.posts}>
        <h1>All posts</h1>
        <PostsGrid posts={props.posts} />
    </section>
    )
}
export default AllPosts;