多个条件 if 语句不起作用

Question

I am working on a project for my wife's diabetes and I have a multiple conditional if statement that isn't working... I have preferences to choose from and it goes to the first one in the list... here is my code

          {this.state.preferences.timesPD === 3 &&
          this.state.preferences.chkCarbs === true &&
          this.state.preferences.chkInsulin === true ? (
            <TableThree
              add={this.add}
              date={this.state.date}
              sugarB={this.state.sugarB}
              carbsB={this.state.carbsB}
              insulinB={this.state.insulinB}
              sugarL={this.state.sugarL}
              carbsL={this.state.carbsL}
              insulinL={this.state.insulinL}
              sugarD={this.state.sugarD}
              carbsD={this.state.carbsD}
              insulinD={this.state.insulinD}
              editIdx={this.state.editIdx}
              startEditing={this.startEditing}
              stopEditing={this.stopEditing}
              handleChange={this.handleChange}
              data={this.state.data}
              header={[
                {
                  name: "Sugar Count",
                  prop: "sugarB"
                },
                {
                  name: "Carbs",
                  prop: "carbsB"
                },
                {
                  name: "Insulin",
                  prop: "insulinB"
                },
                {
                  name: "Sugar Count",
                  prop: "sugarL"
                },
                {
                  name: "Carbs",
                  prop: "carbsL"
                },
                {
                  name: "Insulin",
                  prop: "insulinL"
                },
                {
                  name: "Sugar Count",
                  prop: "sugarD"
                },
                {
                  name: "Carbs",
                  prop: "carbsD"
                },
                {
                  name: "Insulin",
                  prop: "insulinB"
                }
              ]}
            />
          )}

what i'm wanting to do is display one table at a time depending on the options I select

Answer 1

At the end of your condition, replace

this.state.preferences.chkInsulin === true ? (

by

this.state.preferences.chkInsulin === true && (

Full code:

  {this.state.preferences.timesPD === 3 &&
  this.state.preferences.chkCarbs === true &&
  this.state.preferences.chkInsulin === true && (
    <TableThree
      add={this.add}
      date={this.state.date}
      sugarB={this.state.sugarB}
      carbsB={this.state.carbsB}
      insulinB={this.state.insulinB}
      sugarL={this.state.sugarL}
      carbsL={this.state.carbsL}
      insulinL={this.state.insulinL}
      sugarD={this.state.sugarD}
      carbsD={this.state.carbsD}
      insulinD={this.state.insulinD}
      editIdx={this.state.editIdx}
      startEditing={this.startEditing}
      stopEditing={this.stopEditing}
      handleChange={this.handleChange}
      data={this.state.data}
      header={[
        {
          name: "Sugar Count",
          prop: "sugarB"
        },
        {
          name: "Carbs",
          prop: "carbsB"
        },
        {
          name: "Insulin",
          prop: "insulinB"
        },
        {
          name: "Sugar Count",
          prop: "sugarL"
        },
        {
          name: "Carbs",
          prop: "carbsL"
        },
        {
          name: "Insulin",
          prop: "insulinL"
        },
        {
          name: "Sugar Count",
          prop: "sugarD"
        },
        {
          name: "Carbs",
          prop: "carbsD"
        },
        {
          name: "Insulin",
          prop: "insulinB"
        }
      ]}
    />
  )}