When I am trying to console.log(props) it is giving me an empty object. It returns as {}. And also in console when I try to write props it gives VM410:1 Uncaught ReferenceError: props is not defined at :1:1 Although it is defined in code Here is the code

import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux';
import { getProductsBySlug } from '../../actions';
import { Layout } from '../../components/Layout'

/**
* @author
* @function ProductListPage
**/

export const ProductListPage = (props) => {
  const dispatch=useDispatch();
  console.log(props);
  useEffect(()=>{
    console.log(props);
    dispatch(getProductsBySlug());
  },[]);

  return(
    <Layout>
      ProductListPage
    </Layout>
   )

 }

This is the product.action.js file from which I am getting Product List Page

import axios from "../helpers/axios";

export const getProductsBySlug=(slug)=>{
    return async dispatch=>{
        const res=await axios.get(`/products/${slug}`);
        console.log(res);
    }
}

This is the Layout Page

import React from 'react'
import { Header } from '../Header'
import { MenuHeader } from '../MenuHeader'

/**
* @author
* @function Layout
**/

export const Layout = (props) => {
  return(
    <>
        <Header/>
        <MenuHeader/>
        {props.children}
    </>
   )
   

 }

This is the header file

import React from 'react'
import './style.css';
/**
* @author
* @function Header
**/

export const Header = (props) => {
  return(
    <div className='header'></div>
   )

 }

This is the menuheader file

import React, { useEffect } from 'react';
import './style.css';
import { useSelector, useDispatch } from 'react-redux';
import { getAllCategory } from '../../actions';

/**
* @author
* @function MenuHeader
**/

export const MenuHeader = (props) => {

  const category = useSelector(state => state.category);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getAllCategory());
  }, []);


  const renderCategories = (categories) => {
    let myCategories = [];
    for (let category of categories) {
      myCategories.push(
        <li key={category.name}>
          {
            category.parentId ? <a
              href={`/${category.slug}?cid=${category._id}&type=${category.type}`}>
              {category.name}
            </a> :
            <span>{category.name}</span>
          }
          {category.children.length > 0 ? (<ul>{renderCategories(category.children)}</ul>) : null}
        </li>
      );
    }
    return myCategories;
  }
  return (
    <div className="menuHeader">
      <ul>
        {category.categories.length > 0 ? renderCategories(category.categories) : null}
      </ul>
    </div>
  )

}

Basically the reason I am logging out prop because when I am going through the link http://localhost:3000/Samsung and i want to send the get request to Samsung but it is actually going to undefined http://localhost:2000/api/products/undefined

So how can I get the Samsung in place of undefined.

CodePudding user response：

If you want to to use props , you need to pass you function props.

Like this:

export const ProductListPage = (props) => {
  const dispatch=useDispatch();
  console.log(props);
  useEffect(()=>{
    console.log(props);
    dispatch(getProductsBySlug());
  },[])
return () => {
<div>{props}</div>
}
;

  return(

    <Layout>
      <ProductListPage props={someData} />
    </Layout>
   )

 }

This way you can see the the props that you passed inside the layout on your screen.

CodePudding user response：

When I am trying to console.log(props) it is giving me an empty object. It returns as {}.

This happens if you do not pass any props to the element.
i.e doing this: <ProductListPage />

Instead of this: <ProductListPage testProp="123 />

And also in console when I try to write props it gives VM410:1 Uncaught ReferenceError: props is not defined at :1:1 Although it is defined in code

Props object is local to your function component. The one you try to call in the browser console is not defined in the global scope.

Read more about javascript scope