How to do Nested If statements in ReactJs?

Question

I have something like this.

render(){
    if(//loading){
        return ( <div>loading</div>);
    }
    else{
        if(//has results){
            return (
                     this.props.reducer.results.map((result, i) => {
                            return <Result key={'credit-card-result-' + i} >{result}</Result>;
                     })
            );
        }
        else {
            return (
                <div>no results found </div>
            );
        }
    }
}

but this does not seem to work. I also wanted to do an elseif but that also did not work.

What do you mean by "does not seem to work" ? That looks like valid JSX. What actually happens that makes you think there's a problem? — Paul Phillips
– Paul Phillips, Commented Jan 18, 2017 at 0:42

Eric G · Accepted Answer · 2017-01-18 00:34:59Z

1

I like to use Element Variables and have one return statement. Using this method you can do your conditional logic like this:

render() {
    let returnThis = null;
    if(//loading){
        returnThis = <div>loading</div>;
    if(//has results){
        returnThis = this.props.reducer.results.map((result, i) => {
                        return <Result key={'credit-card-result-' + i} >{result}</Result>;
                 })
        );
    } 
    else {
        returnThis = <div>no results found </div>;
    }

    return (
        <div>
            {returnThis}
        </div>
    );
}

And here is some more info on their conditional rendering: https://facebook.github.io/react/docs/conditional-rendering.html

edited Jan 18, 2017 at 0:34

answered Jan 17, 2017 at 19:01

Eric G

2,6271 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergio Flores · Accepted Answer · 2017-01-17 19:09:02Z

Try this

const { Component, PropTypes } =  React;

class Result extends Component {
    render() {
    return (
        <div>
        {this.props.children}
      </div>
    );
  }
}

class MyComponent extends Component {
    render(){
    const reducer = {
            results: ['A', 'B', 'C', 'D', 'E']
        };
    const loading = false;
    const hasResults = true;

        if (loading){
            return ( <div>loading</div>);
        } else {
            if (hasResults) {
                return (
            <div>hey
          {reducer.results.map((result, i) => {
              return <Result key={'credit-card-result-' + i}>{result}</Result>;
          })}
          </div>
        );
            } else {
                return (
                    <div>no results found </div>
                );
            }
        }
    }
}



ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

Collectives™ on Stack Overflow

How to do Nested If statements in ReactJs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related