How to update page with info from separate page, using react-router? - reactjs

Question

I have an application with two pages, for simplicity's sake, we'll call them AddItem and ItemList. My difficulty lies in that they need to be on their own pages (/add-item/ & /items/), and I'm not certain how to pass data between the two as they don't really share a common parent.
I don't want to use a callback function because it would require several levels of passing down information.
/* === <Add Item> === */
export default props => {
const [name, setName] = useState("");
return(
<>
<input value={name} onChange={e=>{setName(e.target.value)}} />
<button onClick={SUBMIT_ITEM} />
</>
);
}
/* === <ItemList> === */
export default props => {
const [items, setItems] = useState([
{
name: "Default"
},
{
name: "Second Default"
}
]);
return(
items.map(item=>{return({<p>item</p>})});
);
}
Both of the respective pieces do what they need to do. I'm just not sure how to pass data between them. When the submit button on the AddItem page is pressed, I need it to be added to the ItemList. Is there a good way to do this while keeping them on separate pages? Thank you!

Answer 1

You can do this using the React Context API - https://reactjs.org/docs/context.html
According to the docs - "Context provides a way to pass data through the component tree without having to pass props down manually at every level."
For you, you can register the context at the first level both pages share (at the general component or at or before the router) and then interact with the same data between both as-if props were passed

Answer 2

You are using react router so you can make use of this.props.history.push() in the component where you have to press the button to switch to the next component and send your data.
In the next component you can extract the required data from the prop using this.props.
In your code it would look something like:
/* === <Add Item> === */
export default props => {
const [name, setName] = useState("");
handleClick = () => {
this.props.history.push("/items", state: {name})
}
return(
<>
<input value={name} onChange={e=>{setName(e.target.value)}} />
<button onClick={handleClick} />
</>
);
}
And in ItemList component you would get them like:
export default ItemList = (props) => {
const name = this.props.state.name
const [items, setItems] = useState([
{
name: "Default"
},
{
name: "Second Default"
}
]);
return(
items.map(item=>{return({<p>item</p>})});
);
}
And withRouter HOC is required to have access to history object.