React Conditional Rendering Inline If with Logical && Operator

You may embed expressions in JSX by wrapping them in curly braces. This includes the JavaScript logical && operator. It can be handy for conditionally including an element:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&        <h2>          You have {unreadMessages.length} unread messages.        </h2>      }    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

Note that returning a falsy expression will still cause the element after && to be skipped but will return the falsy expression. In the example below,

will be returned by the render method.

render() {
  const count = 0;  return (
    <div>
      { count && <h1>Messages: {count}</h1>}    </div>
  );
}

React JS: Avoid the Modal to be executed when the component is rendered

You can use conditional rendering with the logical && Operator.
You can read more about conditional renders in the Docs.
For example:

render() {
        return (
          SomeCondition &&
            <Modal
                title="Basic Modal"
                visible={true}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
            >
                <p>Some contents...</p>
                {console.log('visible is false but content is being executed!')}
            </Modal>
        );
    }

React / Redux wait for store to update

You can use Conditional Rendering.

import {addBot} from './actions';

class FlowsContainer extends React.Component {

  componentDidMount() {
      this.props.initStoreWithBot();
  }

  render() {
    // *** at this point I have the store in state prop
    //but editorFlow array is not yet instanced, it's undefined

    const { editorFlow } = this.props.state;
    let tasks;
    if (typeof editorFlow === 'object' && editorFlow.length > 0) {
        tasks = editorFlow[0].flow.tasks;
    }
    return (
      {tasks && 
          <div>      
              Flow editor react component in main container          
          </div>
      }
      );
  }

}

const mapStateToProps = (state) => ({
  state : state
})

const mapDispatchToProps = (dispatch) => {
    return {
        initStoreWithBot : () => dispatch(addBot("test 123"))
    };
};

export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(FlowsContainer)

select checkboxes and show up row - React js

Conditional Rendering

{
  isAllChecked && (
    <HomenetText headingSmall>
      <strong>Fortsatt uten nett?</strong>
    </HomenetText>
  )
}

edit a flatlist item in react native

In <TodoItem /> you can similar logic for modifing todo text as you use in <AddTodo /> for creating new todo. I use conditional rendering to render the <TextInput /> when isEditing is true, and <Text /> when it's not.

{isEditing 
  ? <TextInput value={text} onChangeText={setText} style={styles.itemText} />
  : <Text style={styles.itemText}>{props.title}</Text>
}

the proper way to write a switch statement in a React function component for rendering?

Actually you can do everything you did inside render() method in class-base component with your JSX code. You can use inline ternary operator, logic AND or logic OR operator or you can combine it using variables in your code: You can see all three ways to do that in the example below:

function MyComponent () {
  let somePart = null;
  if (condition) {
    somePart = <Third />;
  }
  return (
    <Fragment>
      <Top />
      {showAll && <Middle />}
      {showConditionally ? <First /> : <Second />}
      {somePart}
      <Bottom />
    </Fragment>
  );
}

Recommend

React Conditional Rendering Element Variables

React Conditional Rendering

React Composition vs Inheritance Specialization

React Composition vs Inheritance Containment

React Using the State Hook Recap Tip: Using Multiple State Variables

React Using the State Hook Recap Tip: What Do Square Brackets Mean?

React Using the State Hook Recap

React Using the State Hook Updating State

React Using the State Hook Reading State

React Using the State Hook Declaring a State Variable

React Using the State Hook What’s a Hook?