React.JS Context API Problem (Rendering Problem)

Question

I'm currently trying to implement a e-commerce project. My question is about Context API and Reducer. Cannot able to render price and other details of the product. in Cart Component

Context.Js ; Here is my Context.js

Reducer.JsHere is the Reducer.js

And My Product Component Code is ;

import './Product.css'
import AddBoxIcon from '@material-ui/icons/AddBox';
import { Context } from "./Context"
import React, {useContext} from "react"




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

   const {addtoBasket} = useContext(Context)

/*
  function alertUser() {
        alert(`${title} added to your card`)
    }

    function addBasket(){
        console.log(title,price)
    }


    function firedFunctions(){
        alertUser()
        addBasket()
    
    }

*/
    
    return (
        <div className="product">
            <div className="product__info">
                <img src={image} alt=""></img>
                <p className="title">{title}</p>
                <div className ="price__add" >
                    <h4>Price : {price} $</h4>
                    <div onClick={() => addtoBasket(title, price, image,id)}>
                    <AddBoxIcon className="btn" />
                    </div>
                </div>                
            </div>            
        </div>
    )
}

export default Product

And My Cart Component Code is ;

import React, {useContext} from 'react'
import './Cart.css'
import {Context} from "./Context"
import Product from "./Product"


function Cart() {

    const {basket} = useContext(Context)
    console.log(basket) // Expected: Empty Array
    return (
        <div className="cart">
            <div className="cart__left">
                <h2>Your Products</h2>
                    <div>
                        {basket.map((product) =>(                          
                            <h4>{product}</h4>
                            {/*why product give me just a title of product*/}
                                                                     
                        ))}
                        
                    </div>

            </div>
            
            <div className="cart__right">
                <h2>Total</h2>
            </div>
        </div>
    )
}

export default Cart

And this is the output when i click the button v.1(console) ;

I want to see Price and image either.

Offtopic - What's the name of the font in the images you pasted? — Vinicius Katata
– Vinicius Katata, Commented Apr 18, 2021 at 16:53

Vinicius Katata · Accepted Answer · 2021-04-18 18:20:01Z

2

You are passing three parameters to addToBasket function, however it is receiving just one object.

Probably what you needs is:

<div onClick={() => addtoBasket({title, price, image, id)}>

I've just replicate it in codesandbox, this is the right answer, take a look: https://codesandbox.io/s/awesome-violet-fr7np?file=/src/index.js

edited Apr 18, 2021 at 18:20

answered Apr 18, 2021 at 16:53

Vinicius Katata

1,0615 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ugurcan Ozyesilova Over a year ago

Nope, its not for that. Thank you anyways

Ugurcan Ozyesilova Over a year ago

in console i can see the output like ; 0: {title: "Iphone XS Max", price: 3000, image: "cdn.vatanbilgisayar.com/Upload/PRODUCT/apple/thumb/…", id: 2} But its not rendering i take a error like : Uncaught Error: Objects are not valid as a React child (found: object with keys {title, price, image, id}). If you meant to render a collection of children, use an array instead.

Vinicius Katata Over a year ago

You cant just <h4>{product}</h4> like it was, take a look at sandbox I've created

Ugurcan Ozyesilova Over a year ago

I saw it.. Appreciated, thank you for your time :)

Collectives™ on Stack Overflow

React.JS Context API Problem (Rendering Problem)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related