CODEWITHSUNDEEP
javascriptreactjs
Jader Costa
Jader Costa

Reputation: 307

React ternary inside of the render

Hi Im trying to use a ternary condition inside of the render but Im getting some errors, this is my code:

render() {
    return (
      <div>
        <div className="isoInputWrapper">
                <Input 
                  ref={email => (this.email = email)}
                  size="large"
                  placeholder="Email"
                  value={this.state.email}
                  onChange={event => {
                    this.setState({ email: event.target.value });
                  }}
                 />
              </div>

              <div className="isoInputWrapper">
                <Input 
                  type="password"
                size="large"
                placeholder="Senha"
                value={this.state.password}
                onChange={event => {
                  this.setState({ password: event.target.value });
                }}
                 />

                {this.props.signup?}

                 <Input 
                  type="password"
                size="large"
                placeholder="Senha"
                value={this.state.password}
                onChange={event => {
                  this.setState({ password: event.target.value });
                }}
                 /> 

                {: do something }

Upvotes: 0

Views: 90

Answers (3)

Estus Flask
Estus Flask

Reputation: 222409

React brackets should contain valid JavaScript expression. this.props.signup? is not a ternary and is not valid.

It should be:

{this.props.signup ?

     <Input 
      type="password"
    size="large"
    placeholder="Senha"
    value={this.state.password}
    onChange={event => {
      this.setState({ password: event.target.value });
    }}
     /> 

: do something}

Notice that do something should be an expression, too.

Upvotes: 1

Anas
Anas

Reputation: 5727

This is the correct syntax:

    render() {
        return (
          <div>
            <div className="isoInputWrapper">
                    <Input 
                      ref={email => (this.email = email)}
                      size="large"
                      placeholder="Email"
                      value={this.state.email}
                      onChange={event => {
                        this.setState({ email: event.target.value });
                      }}
                     />
                  </div>

                  <div className="isoInputWrapper">
                    <Input 
                      type="password"
                    size="large"
                    placeholder="Senha"
                    value={this.state.password}
                    onChange={event => {
                      this.setState({ password: event.target.value });
                    }}
                     />

                    {this.props.signup
                     ? <Input 
                          type="password"
                          size="large"
                          placeholder="Senha"
                          value={this.state.password}
                          onChange={event => {
                              this.setState({ password: event.target.value });
                          }}
                       /> 

                    : <div>do something else </div>
                    }

Upvotes: 1

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

Curly braces need to be opened before ternary and closed after the end of your ternary:

{this.props.signup ?

                 <Input 
                  type="password"
                size="large"
                placeholder="Senha"
                value={this.state.password}
                onChange={event => {
                  this.setState({ password: event.target.value });
                }}
                 /> 

                : <div>test</div> }

Upvotes: 1

Related Questions