3

I wanted to know what the best way to handle my situation would be. I have two Link components that each pass a different variable in state through to the next Component. Depending on the state being passed, the Component conditionally renders certain elements on a page.

Is it best practice to take the state of the location and set the state of my Component to hold that variable? Or is it OK to not save it in the Component's state and render conditionally based on the location's state instead?

It works either way I do it but I'd like to know your thoughts.

Link example:

<NavLink
    key='individual'
    to={{
        pathname: '/',
        state: 'individual',
    }}>
    {name}
</NavLink>
<NavLink
    key='business'
    to={{
        pathname: '/',
        state: 'business',
    }}>
    {name}
</NavLink>

Component example saving to state:

export default ({
    location,
    customer
}) => {
    if (customer !== location.state.type) updateCustomerType(location.state.type)

    return (
        {customer === 'individual' 
            ? ( <div> Hello! </div> ) 
            : ( <div> World! </div> )
        }
    )
}

Component example not saving to state:

export default ({
    location
}) => {
    const customer = location.state.type

    return (
        {customer === 'individual' 
            ? ( <div> Hello! </div> ) 
            : ( <div> World! </div> )
        }
    )
}

Using React Router 4 & Recompose

sbcreates
  • 199
  • 2
  • 11

0 Answers0