Conditional Rendering Redux and React

Question

I have a Component with an onClick event. This event sets in my global state some boolean to true. How can, depending on this boolean render/hide another component?

I could write something like (pseudocode!)

<ParentCompononet

    conditionalRendering(props) {
        if(props.boolean) {
            <ConditionalComponent />
        } else {
            null
        }

     render () {
         return (
             { conditionalRendering }
         )
/>

Not sure if that would be the right way

Probably too broad as you currently have it :) Are you able to connect the state variable to the props of the component? — Davin Tryon
– Davin Tryon, Commented May 25, 2017 at 11:24

Davin Tryon · Accepted Answer · 2017-05-25 11:26:05Z

2

Once you connect the boolean value to props, you could just do something like this:

const MyComponent = (props) => {

   return { props.myBool && <MyChildComponent /> };

}

or slightly more verbose:

const MyComponent = (props) => {

   if (props.myBool) {
       return <MyChildComponent />;
   } else {
       return null;
   }    
}

answered May 25, 2017 at 11:26

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

four-eyes Over a year ago

I edited my Q. Nearly what I wrote in pseudocode I think?

Davin Tryon Over a year ago

Yeah, looks about the same :)

four-eyes Over a year ago

Awesome. Wasnt sure if that is the proper way/best practice to do it!

Kevin Burton Over a year ago

Does it matter that the state object is an object For example what if instead of props.myBool I had props.obj.myBool and obj was connect to the state?

TRomesh · Accepted Answer · 2017-05-25 11:34:19Z

Assuming you have configured react-redux propely, This might be the one you are looking for.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as Actions from '../../actions';



class User extends Component {
    constructor(props) {
      super(props);

    }

    click=()=>{
    this.props.actions.someEvent();
    }

    render() {

      return (
        <div>
        (this.props.useravailable) ? <div>Hello world!</div> : <div/>
        </div>
      );
    }
}

Login.PropTypes = {
  useravailable: PropTypes.bool.isRequired,
  actions: PropTypes.object.isRequired
}

let mapStateToProps = (state,props) => {
  return {
    useravailable: state.user
  }
}

let mapDispatchToProps = (dispatch) => {
  return {
    actions:bindActionCreators(Actions,dispatch)
  };
}

export default connect(mapStateToProps,mapDispatchToProps)(User);

Collectives™ on Stack Overflow

Conditional Rendering Redux and React

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related