React - Passing state to another component - Component accessed via URL

Question

Hi I'm very new to React (day 2). I simply want to pass a state from one component to another but I've struggled to find a tutorial that handles this in the way my project is structured (I imagine my project is structured very poorly...). I've uploaded reproducible code on codeSandbox: codesandbox.io/s/dreamy-maxwell-q83lc

My Code

My App.js currently looks like this. I access the component screens via a different url.

import componentOne from "./componentOne"
import componentTwo from "./componentTwo"

function App() {
    return (
        <div>
            <Router>
                <Switch>

                    <Route path = "/componentOne">
                        <componentOne/>
                    </Route>

                    <Route path = "/componentTwo">
                        <componentTwo/>
                    </Route>

                </Switch>
            </Router>
        </div>
    )
}

export default App

I want to pass a state from componentOne to componentTwo. This is my componentOne.jsx file. By clicking an image, the url changes and hence I am at the componentTwo page. But I'm not sure how to pass the state from componentOne to it this way.

import {useState, useEffect} from "react";

function componentOne() {
    const [stateOne, setStateOne] = useState(null)
    const [stateTwo, setStateTwo] = useState(null)
    const [stateThree, setStateThree] = useState(null)

    /**
     * API call that populates stateOne, stateTwo and stateThree
     */

    return (
        <div>
                        
            {/*I want to pass stateOne to componentTwo*/}
            <a href="/componentTwo">
                <img src = {stateOne.image} alt={""}/>
            </a>

            {/*I want to pass stateTwo to componentTwo*/}
            <a href="/componentTwo">
                <img src = {stateTwo.image} alt={""}/>
            </a>

            {/*I want to pass stateThree to componentTwo*/}
            <a href="/componentTwo">
                <img src = {stateThree.image} alt={""}/>
            </a>

        </div>
    )
}

export default componentOne

This is my componentTwo.jsx file. Note that the data I want to pass to componentTwo is JSON.

function componentTwo(props) {
    // I want my JSON data to be in props

    return(
        // I then want to use this JSON data to display things
        <text> {props.title} </text>
    )
}

export default componentTwo

What I've tried so far

So far, I've removed the componentTwo route path from App.js and added it to componentOne in this way, but it doesn't seem to be working.

function componentOne() {
    return (
        <div>
        ...

           <Router>
                <Switch>
                    <Route path = "/componentTwo">
                        <componentTwo recipe={stateThree}/>
                    </Route>
                </Switch>
            </Router>
            <a href="/componentTwo">
                <img src = {stateThree.image} alt={""}/>
            </a>
        </div>
    )

}

Answer 1

I would recommend to create a function for redirect, with a code like this:

this.props.history.push({
  pathname: '/componentTwo',
  search: '',
  state: stateTwo
})

But in your case, you should replace your <a tags with the Link component, and then you can pass data through it:

<Link to={{
  pathname: '/componentTwo',
  search: '',
  state: stateTwo
}}> ... </Link>

And then in the ComponentTwo you could access to the state with a code like this:

props.location.state.stateTwo

Remember to get the history and location objects from props or using the withRouter HOC.

Answer 2

You should use React Router which has the Link component that you can use to pass the state.

<Link to={{pathname: "/componentTwo", state: yourstate }}>
    <img src = {stateOne.image} alt=""/>
</Link>