If else expression in reactjs map function

You don’t need to read all the code, just read the comment in the function editQuantityand in the function showOrderItem, especially in the showOrderItem function , and my problem is that I just think is stupid, because both of my functions work the way they should work,

* editQuantity function should change state by changing it, I checked by adding a console line.

* The showOrderItem function should display an element, it also does the job.

My problem: I'm trying to add conditional renderingto the showOrderItem function, which does not work, although I can change the state.

Please read the comment in the showOrderItem function to find out where the problem is:

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 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>
        );
    }
}
+4
1

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

, :

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

map, object array, . for loop state :

order[i].orderQuantityEditing=true;

, array, object .

+3

Source: https://habr.com/ru/post/1673837/


All Articles