CODEWITHSUNDEEP
javascriptreactjs
user2860957
user2860957

Reputation: 476

if else statement in map function reactjs

You don't have to read the whole code, just read the comment in the editQuantity function and in showOrderItem function, specially in the showOrderItem function and my problem is i think just silly, as both of my function are working as they supposed to work,

*editQuantity function supposed to change the state, it changing it, i checked by adding the console line.

*showOrderItem function supposed display the item, he is doing that job as well.

My problem is, i try to add conditional rendering in the showOrderItem function that not working, even though i am able to change the state.

Please read the comment in showOrderItem function, to see where is the problem:

import React from 'react';


export default class ShowOrder extends React.Component{
    constructor(props){
        super(props);
        this.state={
            quantityEditing:this.props.orderItems,

        }
    }

    editQuantity(item){
        const order=this.state.quantityEditing;
        for(var i =0; i<order.length; i++){

            if(order[i].item==item){
                console.log(order[i].orderQuantityEditing)
                order[i].orderQuantityEditing=true;
                this.setState({order:this.state.quantityEditing})
                console.log(order[i].orderQuantityEditing)

            }
        }
    }
    showOrderItem(){

        const style = {cursor:'pointer'}
        const orderItems=this.state.quantityEditing;
        console.log(orderItems)
        const orderItem=orderItems.map((item,index)=>


        <p>
        {orderItems.orderQuantityEditing ? 'some':
        <span style={style} onClick={this.editQuantity.bind(this,item.item)}>
//as you can see in here i added conditional rendering, that if orderItems.orderQuantityEditing is true display me some, but that's not working --orderItems.orderQuantityEditing ? 'some'(this part) does not matter how many times i click on property it never display me my string 'some'
            {item.quantity}</span>}
        <span style={style}> {item.item}</span>
        <span style={style}> Q</span>
        <span style={style}> N</span>
        <span style={style}> X</span>
        </p>

        );

        return orderItem;
    }
    render(){

        return(
        <div>
        {this.showOrderItem()}

        </div>
        );
    }
}

Upvotes: 4

Views: 1092

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Instead of 

{orderItems.orderQuantityEditing ? 
    'some'
     :
     <span style={style} onClick{this.editQuantity.bind(this,item.item)}>

I think you need to write this:

{item.orderQuantityEditing ? 
     'some'
      :
      <span style={style} onClick={this.editQuantity.bind(this,item.item)}>

Because you are using map, and item will be each object of array, so you need to use item to access that property. During the for loop, when changing the state you wrote:

order[i].orderQuantityEditing=true;

That it proper, order will be an array and you need to provide the index to access particular object of that.

Upvotes: 3

Related Questions