Pass data from one page to another in react

Question

I have a form on one page that has an image, name and description and a 'book' button. I'd like to pass all of those values to another page.

Here is the page where data is displayed. I have many forms with different data.

function TherapistEntry(props) {

    const [therapistDetails, setTherapistDetails] = useState({
        name: ""
    })
    
    function storeName(event) {
        setTherapistDetails({
            name: event.target.value
        })

        
    }
    function redirectPage() {
        // PassName(therapistDetails.name)
        props.history.push('/publicTherapistProfile')
    }

    return (
        <div className="album py-5 bg-light">
            <div className="container">
                <div className="row">
                    {therapists.map(properties => {
                        return (
                            <div className="col-lg-3 col-md-4 col-sm-6">
                                <div className="card mb-4 shadow-sm">
                                    <ProfileImage image={properties.image} name="image" />

                                    <div className="card-body">
                                        <p className="card-text" onChange={storeName} name="name">Name: {properties.name}</p>
                                        <p className="card-text" description="description">Description: {properties.description.substring(1, 100)}
                                        </p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className=" btn-group">
                                                <button onClick={redirectPage} type="button" className="viewButtonHover btn btn-md btn-outline-secondary">View</button>
                                            </div>
                                            <small className="text-muted">5 Stars</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>

    )

}

export default withRouter(TherapistEntry)

I am trying to test this with the name value first by storing into state. onChange seems like the only way to store it.

i want to then pass these stored values to this page.

function IndividualTherapistPage(props) {

    const [passedTherapist, setPassedTherapist] = useState({
        name: ""
    })

    return (
        <div>
            <Header />
            <div>
                <div className="row">
                    <div className="alignTherapist col-lg-8 col-md-8 col-sm-8">
                        <div className="container">
                            <h2>Individual Therapist Section</h2>
                        </div>
                    </div>

                    <div className="team-boxed col-lg-8 col-md-8 col-sm-8">
                        <div className="container">
                            <div class="intro">
                                <h2 class="text-center">Therapist </h2>
                                <p class="text-center">Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae.</p>
                            </div>
                            <TherapistOfInterestToPurchase name={passedTherapist.name}/>
                        </div>
                    </div>

                    <div className="col-lg-4 col-md-4 col-sm-4">
                        <h2 style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>Book</h2>
                    </div>
                </div>
            </div>
            {/* <Footer /> */}
        </div>
    )

}
export default IndividualTherapistPage;

Does anyone know how i can do this?

Answer 1

I think the easiest way is to use localStorage or HTTP GET parameters.

An alternative (more advanced) way is to use a react-router and some kind of global state menagment.

Answer 2

In react you transfer state from parent to child through props. In your scenario you can do by Redux . This is use for global state management.

Answer 3

You can pass these values in params to another page and then get it following the example this topic below.

react-router-pass-param-to-component

It's not necessary to use localstorage or redux for something like that.

Answer 4

There are multiple ways of doing this.

1. This is the easiest approach, you can just use the localStorage browser API if you don't have too many things to send between pages. You can also do it with the help of reactjs-localstorage .

2. This is a little more complicated but also might be better in the long run as you scale, use Redux global state management to achieve this.