Why two if statement working like if and else statement

Question

My problems is kinda confusing, you dont have to read the whole code just check the function showOrder()

What i am trying to do in the showOrder is simply this, that when ever person click on the edit button, it should display the form, which is fine, but as soon as click on the edit button, its not displaying me the item, please read below what i am trying to say,

like lets say i have theese two items, and this is my first out put

Cook Dinner
Eat Dinner

so now lets say i click on the Cook Dinner 4 items, so my out put look like this

Cook Dinner
4 Cook Dinner [Edit Button]
Eat Dinner

Up untill now every thing is fine, but now what i want to happen is this, that when i click on Edit Button, it should leave 4 Cook Dinner as it is, and below it should display me the form, to leave notes, basically i want my output to like this

Cook Dinner
4 Cook Dinner [Edit Button] //Please read the notes below as well
//Display the form, to leave the notes, 
Eat Dinner

Notes for above output : It displaying me the form, but it removing the 4 Cook Dinner line

and i am kinda confuse, because to acheive it, i am using, showOrder() function with two if statement,

First if statement basically saying if orderEditing is true display the form,

and Second if statement is basically saying if quantity greater than zero, display the quantity and task

But instead displaying both of them, these two working like if and else statement, can some body explain me why??,

The only logical explanation is this, that one function can only have one statement, but still not clear to me any confusion please let me know.

import React from 'react'
const order = [];



export default class Header extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            quantity:0,
            editing:false,
            orderEditing:false,
            order
        }
    }

    displayMenu ()
    {
        return (
        <div>
        <div style={{cursor:'pointer'}} onClick={this.handleMenu.bind(this)}>
        {this.props.task}

        </div>
        <button onClick={this.onEdit.bind(this)}>Edit</button>
        </div>
        );
    }
    onEdit()
    {
        this.setState({editing:true})
    }

    handleMenu()
    {
        this.setState({quantity:this.state.quantity+1});

    }

    showOrder()
    {

        if(this.state.orderEditing==true )//***First if statement
        {
            console.log(this.state.orderEditing) /* OutPut -- False*/
            console.log(this.state.quantity)    /* OutPut -- 4*/
            return (
            <form>
            <input type='text' defaultValue={this.state.quantity} size='1'/>
            <input type='text' placeholder='Notes'/>
            </form>
            );
        }//closing of first if statement


        if(this.state.quantity>0)//*** Second if statement
        {
            console.log(this.state.orderEditing)    /* OutPut -- true*/
            console.log(this.state.quantity)        /* OutPut -- 4*/
            return (
            <div>


            {this.state.quantity } {this.props.task}
            <button onClick={this.editOrder.bind(this)}>Edit</button>

            </div>
            );
        }
    }//closing of second if statement.

editOrder()
{
    this.setState({orderEditing:true})
}




    render(){

        return (
        <div>
        {this.displayMenu()}
            {this.showOrder()}
        </div>
        );
    }
}

score 2 · Answer 1 · answered Mar 21 '17 at 01:03

When you return within your function, the code after the return block will not execute. That is why if the first condition is true, the second one will not render. If you wanted to display both individually, you could always put them into two separate functions that have their own returns.

score 1 · Accepted Answer · edited May 23 '17 at 12:00

In React, components can be expressed as regular JavaScript functions and as functions, they behave exactly the same way. As soon as any condition is met your showOrder function returns with the result of one of those branches and no other code is executed. The first condition that passes the test takes it all. Your example can be reduced to:

function f() {
    if (condition1) return a;
    if (condition2) return b;
}

In order to render (return) multiple results, you must wrap your result with some container element, most likely a div. Then you can conditionally render components using logical AND (&&) operator. React doesn't render some falsy values (null, false, undefined).

Fixed showOrder function may look like this:

showOrder() {
    return (
        <div>
            {this.state.orderEditing && <form>Render form here</form>}
            {this.state.quantity > 0 && <div>Render edit button here</div>}
        </div>
    );
}

I did not have enough point to upvote any body answer, that's why i can not upvote his answer, but after your solution, i changed my accepted answer, can you upvote his answer?, as far as my question, his answer is pretty valid, — user2860957, Mar 21 '17 at 01:44

Why two if statement working like if and else statement

2 Answers2