CODEWITHSUNDEEP
javascriptreactjs
Prova12
Prova12

Reputation: 653

Redirect passing the props

I want to redirect from one component to another and passing the props between them.

function MyFirstComponent({survey}) {
....
// There is a button that triggers the below if clause. The redirect works but it seems the state is not sent.
    if (surveyPage === true) {
        return <Redirect to={{
            pathname: '/detail',
            state: { survey: survey }
        }}

    }

    return("something")

}

MySecondComponent is the component to which the user is redirected to. The redirection works but the props are not sent. In fact, is I console.log(survey), I get undefined.

function MySecondComponent({survey}){
    console.log(this.props.location.survey) // This is "undefined"
    return (
        "test"
    )
}

export default Details

Upvotes: 1

Views: 70

Answers (2)

Ashish
Ashish

Reputation: 410

Please do something like below.

function MyFirstComponent(props) {
    if (surveyPage === true) {
        return <Redirect to={{
            pathname: '/detail',
            state: { survey: props.survey }
        }}

    }

    return("something")

}


function MySecondComponent(props){
    console.log(props.location.state.survey) 
    return (
        "test"
    )
}

Upvotes: 0

net.uk.sweet
net.uk.sweet

Reputation: 12431

As explained in the comments, props don't exist on this in a functional component, so if you weren't deconstructing the props you'd access the property you're interested in like this:

console.log(props.location.state.survey)

Since you ARE deconstructing the props, the props property isn't accessible any more, only the deconstructed properties. You can get directly to the value you're interested in like so: 

function MySecondComponent({ location: { state } }){
    console.log(state.survey)
    return (
        "test"
    )
}

Demo here

Upvotes: 1

Related Questions