0

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.

       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.

hirat3
  • 23
  • 6
  • can you create codepen or sandbox instead of writing code here? – ericobi Dec 24 '21 at 03:20
  • The Product component is probably rendering that `p` tag with the `150` and the class. you don't see the react components when inspecting the generated html, you see the html returned by the function – arieljuod Dec 24 '21 at 03:29
  • I've never done it before. In sandbox can I easily put the whole thing in or do I have to copy paste each file? – hirat3 Dec 24 '21 at 03:39

1 Answers1

2

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.

René Link
  • 48,224
  • 13
  • 108
  • 140