How to include an IF statement within JSX?

Question

I'm a newbie to react js and redux technologies and I'm trying to include an IF statement into JSX in order to display a fontAwesome icon only if my state is not set to 'add'.. And the following is my code...

import React, { Component } from "react";
import RegionList from "./RegionList";
import RegionForm from "./RegionForm";
import { Row, Col, Container } from "react-bootstrap";
import "./regionManagement.scss";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { regionActions } from "./ducks/index";
import { reset } from "redux-form";
import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const regionStates = {
  add: {
    title: "Add New Region",
    button: "Add New Region",
    selectedRegion: null,
    mode: "add",
    fieldDisabled: false

  },

  view: data => {
    return {
      title: "View Region",
      button: "Edit Region",
      selectedRegion: data,
      mode: "view",
      fieldDisabled: true
     };
  },

  edit: data => {
    return {
      title: "Edit Region",
      button: "Update Region",
      selectedRegion: data,
      mode: "edit",
      fieldDisabled: false

    };
  }
};

class Region extends Component {
  constructor(props) {
    super(props);
    this.state = regionStates.add;
   }

  viewForm = data => {
    this.setState(regionStates.view(data));
  };

  editForm = data => {
    this.setState(regionStates.edit(data));
  };

  addForm = () => {
    this.setState(regionStates.add);
  };

  addRegion = event => {
    this.props.addRegion(event);
  };

  editRegion = event => {
    this.props.editRegion(this.state.selectedRegion);
  };

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

  handleSubmit = event => {
    var selectedRegion;
    if (this.state.mode != "add") {
      selectedRegion = this.state.selectedRegion; // CONSISTS OF the edited name, code and description
      selectedRegion.name = event.regionName;
      selectedRegion.code = event.code;
      selectedRegion.description = event.description;
    }
    let operation;
    switch (this.state.mode) {
      case "view":
        operation = this.editForm(selectedRegion);
        break;

      case "add":
        operation = this.addRegion(event);
        break;

      case "edit":
        operation = this.editRegion(selectedRegion);
        break;
    }
  };

  render() {
    return (
      <>
        <Container>
          <Row className="space"></Row>

          <Row>
            <Col sm={4}>
              <h3 className="space2">
                Region
                 {this.state != regionStates.add ? (
                <a href="#" onClick={() => this.setState(regionStates.add)}>
                  <FontAwesomeIcon icon={faPlusCircle} color="#007bff" />
                </a>
                  )}
              </h3>

              <RegionForm
                title={this.state.title}
                button={this.state.button}
                selectedRegion={this.state.selectedRegion}
                mode={this.state.mode}
                onSubmit={this.handleSubmit}
                fieldDisabled={this.state.fieldDisabled}
                addForm={this.addForm}
                    />
            </Col>

            <Col sm={8}>
              <RegionList
                viewForm={this.viewForm}
                editForm={this.editForm}
                mode={this.state.mode}
              />
            </Col>
          </Row>
        </Container>
      </>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state,
    region: state,
    regions: state.Regions.regions
  };
}

export default withRouter(connect(mapStateToProps, regionActions)(Region));

I'm using three modes namely 'view', 'edit', 'add...'Is there any proper way to accomplish this?

Answer 1

I can see 3 approaches for this -:

1. Use ?: (ternary)

   {this.state != regionStates.add ? (
     <a href="#" onClick={() => this.setState(regionStates.add)}>
       <FontAwesomeIcon icon={faPlusCircle} color="#007bff" />
     </a>
   ) : null}
   

2. Use &&

   {this.state != regionStates.add && (
      <a href="#" onClick={() => this.setState(regionStates.add)}>
        <FontAwesomeIcon icon={faPlusCircle} color="#007bff" />
      </a>
   )}
   

3. Use function call for this where we can add if else

   {this.renderBody()}
   
   renderBody = () => {
     if(this.state != regionStates.add) {
       return (
         <a href="#" onClick={() => this.setState(regionStates.add)}>
           <FontAwesomeIcon icon={faPlusCircle} color="#007bff" />
        </a>
      )
     }
   
     return null;
   }
   

Answer 2

You can also do like this.

{!this.state.regionStates.add && (
  <a href="#" onClick={() => this.setState(regionStates.add)}>
    <FontAwesomeIcon icon={faPlusCircle} color="#007bff" />
  </a>
)}

Answer 3

you can use && operator here instead of ternary operator.

{this.state != regionStates.add && (
  <a href="#" onClick={() => this.setState(regionStates.add)}>
    <FontAwesomeIcon icon={faPlusCircle} color="#007bff" />
  </a>
)}