multiple conditional if statement not working

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

You are using a ternary operator but you never have any `false` condition. ( `condition ? true : false` ) In your case, you are missing the `: false` part. — Nicolas, Nov 14 '19 at 16:08
Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Emile Bergeron, Nov 14 '19 at 16:11
Hey Wesly! Can you provide more code? you can put them here or some where else like codepen. — Vahid Al, Nov 14 '19 at 16:11
Nicolas is correct, and if that's not the issue we can't really tell what it would be since we can't see where the conditional values are coming from or what their boolean values might be. Also, instead of writing ```x === true```, you can simply write ```x``` — Chris B., Nov 14 '19 at 16:11
Hi Wesley, where is the error ? Always post the error reorted by the language/tool/UI. I'm sure if you try to reduce the code t oa simpel case, for example removing all the repeated cases, you will find the mistake yourself. — Alex 75, Nov 14 '19 at 16:45

score 1 · Accepted Answer · answered Nov 14 '19 at 16:12

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"
        }
      ]}
    />
  )}

multiple conditional if statement not working

1 Answers1