I am trying to pass an array from / (Home) my /item (itemInfo) page
This is the main App() where we route:
function App() {
return (
<Router>
<div className="Application">
<Switch> {/*Makes sure we are only on one route at a time*/}
<Route exact path='/' component={Home} />
<Route exact path='/item/:pId' component={ItemInfo} />
<Route exact path='/vendor' component={VendorInfo} />
<Route exact path='/addVendor' component={AddVendor}/>
<Route exact path='/addProduct' component={AddProduct}/>
</Switch>
</div>
</Router>
);
}
And I have no clue on how to pass the array from {Home} into {ItemInfo}, since we can't pass it as a URL parameter (unlike :pId) This is the {ItemInfo} Page:
import React from 'react'
import { useParams } from 'react-router-dom'; //Helps us redirect to other pages
function ItemInfo(){
let {pId}= useParams();
//want to have [data] array on this page to access it hopefully like this
//console.log(data) and see the array on the console
function addNewDataRow(){
console.log("ADD new Data Row");
}
return (
<div className="Application">
<header>
<nav className="navbar navbar-dark bg-dark">
<div className="container-fluid">
This is the {Home} (where I want to pass the data array from):
function Home(){
const product_data=[
{pId: 1, pName:'product name', pDescription:' description here', pQuantity:1, pWeightType:'Kg'},
]
const [data,setData]=useState(product_data);
const [vData, setvData]=useState(vendor_data);
const history=useHistory();
function itemTableRowClicked(e){
console.log(e.target.id);
console.log("YOU CLICKED ME");
let path=`/item/:${e.target.id}`;
//let path=`/item`;
history.push(path);
}
The function itemTableRowClicked(e) is the one that re-routes to the ItemInfo Page
I am a fairly new programming student, so let me know if my description isn't clear or I am missing essential information :)
React possesses one-way data flow, i.e parent to child . one approach is to define state in a component which is parent to both Home and ItemInfo i.e App but that's not a good approach. Second is to use Context Api or other state management tools like redux, flux etc. reactjs.org/docs/context.html (for context api)
function App() {
const product_data=[
{pId: 1, pName:'product name', pDescription:' description here', pQuantity:1, pWeightType:'Kg'},
]
const [data,setData]=useState(product_data);
return (
<Router>
<div className="Application">
<Switch> {/*Makes sure we are only on one route at a time*/}
<Route exact path='/' >
<Home data={data} setData={setData} />
</Route>
<Route exact path='/item/:pId'>
<ItemInfo data={data} />
</Route>
<Route exact path='/vendor' component={VendorInfo} />
<Route exact path='/addVendor' component={AddVendor}/>
<Route exact path='/addProduct' component={AddProduct}/>
</Switch>
</div>
</Router>
);
}
//Home component
function Home({data,setData})......
//ItemInfo component
function ItemInfo({data}){
You're already using useHistory from react-router. This would allow you to push a state along with the route change. The state is where you can pass the array.
// Push a new entry onto the history stack with a query string
// and some state. Location state does not appear in the URL.
history.push('/home?the=query', { someArray: [...stuff] });
You can then dereference that state in the second component from props.location.state.someArray.
Of course, you'll need to change your ItemInfo component to accept props.
More here: https://v5.reactrouter.com/web/api/history