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 ?

Is there a real page-reload between those two or do you just switch two views in your react app? — Martin, Mar 28 '21 at 12:32
Hey @Martin So there is a page under a route lets call it /people and once you click on the view button in the /people route it takes you to another route /peopleInfo lets call it. — Joshua, Mar 29 '21 at 19:19

score 0 · Answer 1 · answered Mar 28 '21 at 11:50

0

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.

answered Mar 28 '21 at 11:50

jkaczmarkiewicz

1,500
6
17

score 0 · Answer 2 · answered Mar 28 '21 at 11:56

0

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.

answered Mar 28 '21 at 11:56

Rahul Khatri

56
1
3

score 0 · Answer 3 · answered Mar 28 '21 at 12:02

0

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.

answered Mar 28 '21 at 12:02

Emerson Jose

86
1
3

score 0 · Answer 4 · answered Mar 28 '21 at 12:02

There are multiple ways of doing this.

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.
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.

Pass data from one page to another in react

4 Answers4