Cfrgtkky

I'm new to react and redux (and posting on stack overflow!).

I'd like to hide/display a redux-form based on a button choice.

I have two buttons: Option-A and Option-B.

I followed the redux tutorial exactly to have their onClick methods dispatch setVisibilityFilter(buttonprops.filter) through a container. See: FilterLink.js This works fine and updates the state's visibilityFilter with the corresponding option.

However, I'm stuck about how I should access the state's filter to hide/display different forms. I would like something similar to what formValueSelector does, but it isn't applicable for buttons (because they don't return values?)

This is my main component's code:

class MainForm extends Component {

  render() {

    const { error } = this.props

    return ( 

      <Grid.Column width={9}>

        <Button.Group floated='right'>

        <FilterLink filter={VisibilityFilters.SHOW_A}>A</FilterLink>

        <Button.Or />

        <FilterForm filter={VisibilityFilters.SHOW_B}>B</FilterLink>

        </Button.Group>

        /* If SHOW_A, display FORM_A, else if SHOW_B, display FORM_B */

    </Grid.Column> 

  )

}}

I feel like just toying with the state directly now would waste the effort of implementing redux. I think I should be passing the value as a prop down to the child forms, but I'm confused how to do so, especially because I don't know how I would get that value without changing my onClick anyway, and onClick is already defined in FilterLink.js

There must be some way to access my state visibility filter to hide/display a form, just unsure how to get there. Thank you!

With connect, you can pass anything from the Redux Store to your component through its props.

So based on the link you posted, this should work:

import { connect } from 'react-redux'



class MainForm extends Component {

  render() {

    const { error, visibilityFilter } = this.props

    return ( 

      <Grid.Column width={9}>

        <Button.Group floated='right'>

        <FilterLink filter={VisibilityFilters.SHOW_A}>A</FilterLink>

        <Button.Or />

        <FilterForm filter={VisibilityFilters.SHOW_B}>B</FilterLink>

        </Button.Group>

        {visibilityFilter === VisibilityFilters.SHOW_A

          ? <FormA />

          : <FormB />

        }

    </Grid.Column> 

  )

}}



const mapStateToProps = state => ({

  visibilityFilter: state.visibilityFilter

})



export default connect(mapStateToProps)(MainForm)

Make sure you have connected the component you want to conditionally render things to the redux store.

import { connect } from 'react-redux'



...



const mapStateToProps = state => ({visibleFilter: state.visibilityFilter})

export default connect(mapStateToProps)(MainForm)

Then you can access this information in your connected component's props, e.g.

render() {



  return {



     {this.props.visibleFilter === VisibilityFilters.SHOW_A && (<FormA /> )}



     {this.props.visibleFilter === VisibilityFilters.SHOW_B && (<FormB /> )}



   }



}