How to pass dynamically updated value from one component to another in React?

Question

I'm a React newbie, came across an interesting challenge to create "fake ecommerce page" with this api.

My Products.js file is this. I get api response and save it to a state(console logging it in one line to make sure it's working). You click on a SVG icon of + sign and that item gets "added" to the cart(don't want to add whole item for now, but just make it seems like it's adding it with setCartItems(cartItems + 1) so only number increases). Only thing is that the cart icon is in Header.js component, and I need to pass it there somehow. I've tried with props but couldn't get it to work.

Any help is very much appreciated since I want to learn from your code.

import React from 'react'
import {useState, useEffect} from 'react'
import axios from 'axios'
import plus from '../images/plus.svg'

export default function Products(props) {
    const [products, setProducts] = useState([])
    const [cartItems, setCartItems] = useState(0)

    const updateCart = () => {
        setCartItems(cartItems + 1)
        console.log(cartItems)
    }
    useEffect(() => {
        axios({
            method: 'GET',
            url: 'https://api.escuelajs.co/api/v1/products'
        }).then((response) => {
            setProducts(response.data)
            console.log(response.data)
        })
    }, [])

    return (
        
            
                
                    
                        
                            Store
                        
                        
                            
                                
                            
                            
                                
                            

                        
                    
                
                {
                    products.slice(0, 20).map((product) => {
                            return (
                                
                                    
                                        
                                        
                                            {product.title}
                                            
                                        
                                        {product.price} €
                                    
                                
                            )
                        }
                    )
                }
            
        
    )
}

This is my Header.js file.

import React from 'react'

export default function Header() {
    return (
        
            

                
                    
                
                

                
                    
                        
                            Shop
                            About
                        
                    
                

                
                    
                        
                        NORDICS
                    
                

                

                    
                        
                    

                    
                        
                       
                        NUMBER OF ITEMS IN CART GOES HERE
                    

                
            
        
    )
}

And finally, if needed, this is my App.js file.

import './App.css';

import About from './components/About';
import Header from './components/Header';
import Hero from './components/Hero';
import Products from './components/Products';

function App() {

  return (
    
      
      
      
      
    
  );
}

export default App;

user3xcN · Answer

You either need to use global state management like redux or pass a callback function from the header to the products component to update the state. React is unidirectional data flow downward, so you can't pass props back up like you can from parent to child.

How to pass dynamically updated value from one component to another in React?

1 Answers