Having a problem with the state not being transferred to another component - reactjs

Question

I am having a problem that the value made by one component cannot be delivered to another component. I made a state in the top component and I think I connected it well. But the desired array made of state is empty. Sorry for the long code to ask.
The code below is the top component, and InCart is the state that I'm having issues with.
App.js:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Site from './Site/Site';
import { useState } from 'react';
import RealCart from './RealCart/RealCart';
function App() {
const [Inproducts,setInproducts] = useState([])
const [InCart, setInCart] = useState([]);
return (
<BrowserRouter>
<Routes>
<Route path='/realCart' element={<RealCart InCart={InCart} setInCart={setInCart}/>} />
<Route path='/loginHome' element={<Site InCart={InCart} setInCart={setInCart} Inproducts={Inproducts} setInproducts={setInproducts}/>}/>
</Routes>
</BrowserRouter>
);
}
export default App;
There are many components connected in the middle, so I omitted it, but the props are connected as well. And I got the json file from here.
Section5Bottom.jsx:
import axios from 'axios';
import React, { useEffect } from 'react';
import "../section5.css";
import Section5Card from './Section5Card';
function Section5Bottom({Inproducts, setInproducts, InCart, setInCart}) {
useEffect (()=> {
axios.get("/data/products.json").then((data)=>{
setInproducts(data.data.products);
});
},[setInproducts]);
return (
<div id='Section5Bottom'>
{
Inproducts.map((product)=>{
return <Section5Card key={`key-${product.id}`} product={product} InCart={InCart} setInCart={setInCart}/>
})
}
</div>
)
}
export default Section5Bottom;
When I clicked the icon below the file, I used the InCart made in App.js to put the array value of the selected card in the array. If I check the console here, the array is good as shown in this photo.
Section5Card.jsx:
import '../section5.css';
import {FaCartPlus} from 'react-icons/fa';
import { useDispatch } from 'react-redux';
import './card.css';
function Section5Card({product, InCart, setInCart}) {
const dispatch = useDispatch();
const handleCart = () => {
const cartItem = {
id : product.id,
image : product.image,
provider : product.provider,
price : product.price,
name : product.name
}
setInCart([...InCart, cartItem])
}
return (
<div>
<div id='CardWrap'>
<div>
<img id='Section5CardImg' src={product.image} />
</div>
//************************************
<div>
<FaCartPlus size='20' style={{color:'black', position:'relative', top:'124px', left:'130px', cursor:'pointer'}} onClick={()=>{dispatch({type:"ADD"}); handleCart()}} />
</div>
//*************************************
<div id='CardBot'>
<div id='CardBotBPrice'>
₩{product.price}
</div>
<div id='CardBotTag'>
{product.people?
<span id='CardBotTagPeople'>
{product.people}명
</span>:
<>
<span id='CardBotTagSale'>
{product.sale}
</span>
</>}
</div>
</div>
</div>
</div>
)
}
export default Section5Card;
And the below file is the one I wish to bring up in the InCart state. But even if I check with the console, the array is empty as shown below:
RealCart.jsx:
import React from 'react'
import Top from '../Site/Header/Top'
import Navi from '../Site/Header/Navi/Navi'
import Cart from './Components/Cart';
import CartHeader from './Components/CartHeader';
function RealCart(InCart, setInCart) {
console.log(InCart)
return (
<div>
<Top />
<Navi />
<Cart />
<CartHeader />
</div>
)
}
export default RealCart;

Answer 1

In your RealCart.jsx file you have to wrap your props with {} and it will be like
function RealCart({InCart, setInCart}) {
console.log(InCart)
return (
<div>
<Top />
<Navi />
<Cart />
<CartHeader />
</div>
)
}