Ternary operator in react native

Question

 <Container>
    <Header function1={()=>this.props.navigation.openDrawer()}/>
        <Content>
                {this.state.formInputs.formFeilds.map((data)=>(
                                                {this.state[`${data}`]?<Item floatingLabel success>:<Item floatingLabel>}
                                                <Label>data</Label>
                                                <Input value={data}/>
                                                <Icon name='checkmark-circle' />
                                            </Item>             
                                        ))}

              </Content>
      </Container>
                )

I have this simple return statement in render function of my react native class

I want to use <Item floatingLabel success> when this this.state[${data}] is true else <Item floatingLabel > when it is false.

So i use ternary operator (?:) But the code is throwing error

that this is reserved key word

So I converted {this.state[${data}]?<Item floatingLabel success>:<Item floatingLabel>} to this.state[${data}]?<Item floatingLabel success>:<Item floatingLabel>

Now the error is

>     Unexpected token, expected ,
 (128:5)   126 |                           ))}   
127 |
128 |      </Content>
129 |      ^ </Container>

But if I render like

     <Container>
                    <Header function1={()=>this.props.navigation.openDrawer()}/>
<Content>
        {this.state.formInputs.formFeilds.map((data)=>(
                                        <Item floatingLabel success>
                                        <Label>data</Label>
                                        <Input value={data}/>
                                        <Icon name='checkmark-circle' />
                                    </Item>             
                                ))}

      </Content>

then code run successfully. But I need to use ternary operator. Any help please.

Answer 1

You can not use a ternary operator to render an opening tag like this. What you are trying to achieve is to pass the success prop down to your Item component, if there is a value in your state corresponding to the key data. This can be achieved like so

  <Container>
    <Header function1={this.props.navigation.openDrawer}/>
    <Content>
      {this.state.formInputs.formFeilds.map((data)=>(
        <Item floatingLabel success={Boolean(this.state[`${data}`])}>
          <Label>data</Label>
          <Input value={data}/>
          <Icon name='checkmark-circle' />
        </Item>
      ))}
    </Content>
  </Container>

You can then in your Item component do comparisons against the success prop:

if (this.props.success === true) // do something success related

if (this.props.success !== true) // do something failure related

If you have to use ternary operator (which is a bad decision for this specific case, because of duplicated code and less readability) you would need to do it like so:

<Container>
    <Header function1={this.props.navigation.openDrawer} />
    <Content>
      {this.state.formInputs.formFeilds.map(
        data =>
          this.state[`${data}`] ? (
            <Item floatingLabel success>
              <Label>data</Label>
              <Input value={data} />
              <Icon name="checkmark-circle" />
            </Item>
          ) : (
            <Item floatingLabel>
              <Label>data</Label>
              <Input value={data} />
              <Icon name="checkmark-circle" />
            </Item>
          )
      )}
    </Content>
  </Container>

Answer 2

Alternatively, you can do it as following.

<Container>
  <Header function1={()=>this.props.navigation.openDrawer()}/>
    <Content>
      {this.state.formInputs.formFeilds.map((data)=>(
       <Item floatingLabel success={!!this.state[`${data}`]}>
        <Label>data</Label>
        <Input value={data}/>
        <Icon name='checkmark-circle' />
        </Item>             
        ))}
  </Content>
</Container>

Or if you still need to use ternary operator, then try it as following.

{!!this.state[`${data}`] && <Item floatingLabel success>}
{!this.state[`${data}`] && <Item floatingLabel>}