React props don't show in console

Question

I have a page containing a white t shirt and an add to basket button.

The reducer dispatches the action into a data layer

export const initialState = {
basket: [],
}

const reducer = (state, action) => {
console.log(action);
switch(action.type) {
    case 'ADD_TO_BASKET':
        return {
            ...state,
            basket: [...state.basket, action.item],
        };

    default:
        return state;
  }
};

export default reducer

This is WHITETEE.js, where I pass in the values of image, name, and price. By the way, an important thing I noticed is even though inside the product element I put in props and values which I don't know how to style, they are already styled, when I click 'inspect' on the page I see them as paragraphs with classes.

       function WHITETEE(id, title, image, price) {

const [state, dispatch] = useStateValue();

const addToBasket = () => {
    dispatch({
        type: 'ADD_TO_BASKET',
        item: {
            id: id,
            title: title,
            image: image,
            price: price
        }
    })
}

return (
    <div className='whitetee'>
        <div className='w-tee__container'>
            <div>
            <Link to='/'>
                <img src= {HAT} className='small__logo'></img>
            </Link>
            </div>
            <div className='showcase__container'>
                
                <section className='product__info'>
                  //When I click the button and console.log the action the value of these props 
                  doesn't show. As I said before, the code inside 'inspect' is different, instead 
                  of for example price='150', it's <p> tags with '150' and a class
                <Product
                    title='WHITE TEE'
                    price='150'
                    image={Tshirt1}
                />
                    <p className='gradient__text' id='size'>Size</p>
                    <button id='add__button' onClick={addToBasket}>ADD TO CART</button>
                    <div className='socials'>
                        <img src={fb} id='fb__icon'></img>
                        <img src={twitter} id='twitter__icon'></img>
                        <img src={pintrest} id='pintrest__icon'></img>
                    </div>
                </section>  
                <div id='description'>
                    <p className='gradient__text' id='description'>Description</p>
                    <p className='gradient__text' id='description2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis elit neque, et pharetra ex mattis nec.</p>
                </div>
            </div>
        </div>    
    </div>
  )
}

export default WHITETEE

When the 'add to basket' button is clicked it logs the following:

{type: 'ADD_TO_BASKET', item: {…}}
item: {id: {…}, title: {…}, image: undefined, price: undefined}
type: "ADD_TO_BASKET"
[[Prototype]]: Object

My issue is the values are empty or undefined.

Edit: This is the product component. So this is what's rendering the class but my question is why do the values of these props not appear when I console.log?

import React from 'react'
import './Product.css'
import { useStateValue } from './StateProvider'
import { render } from '@testing-library/react'

function Product({ image, title, price }) {

return (
  <div className='product'>

    <img src={image} alt='tshirt1' className='product__image'></img>
    <div className='product_info'>
        <p>
            <strong className='product__price'>{title}</strong>
        </p>
        <p>
            <strong className='product__price'>{price}</strong>
        </p>
    </div>
</div>
)
}
export default Product

Answer 1

Each component gets it's properties via the 1st argument, usually named props . Thus you should deconstruct the props.

Instead of

function WHITETEE(id, title, image, price) { // <-- This is wrong

You should either write

1. function WHITETEE({id, title, image, price}) {

   or

2. function WHITETEE(props) { const {id, title, image, price} = props;

---

Since you wrote

function WHITETEE(id, title, image, price) {

you named the first parameter id . Thus all the props should be in id . The second parameter is used for refs . Since you named it title a ref would be passed as title . image and price will be undefined since React will not pass a 3rd or 4th argument.