How to write "if" condition in my loop getting syntax error and update a row in list

Question

I am stuck between this here. I want to loop and check if the props index and map index match then to change value

But then if I do the following it throws an syntax error pointing at if Please let me know whats going wrong this is going beyond

 import React, {Component} from 'react';

update.js

class UpdateItem extends Component{

constructor(props){
    super(props);
    this.state={editedVal:''};
    //this.setState({editedVal:this.props.eVal});
    this.handleSubmit=this.handleSubmit.bind(this);
    this.handleChange=this.handleChange.bind(this);
}
handleChange(e)
{this.setState({

    editedVal:e.target.value
    });
 //this.props.eVal=e.target.value;
  }
   handleSubmit(e){
    e.preventDefault();
    alert( this.state.editedVal);
    alert(this.props.eIndx);
   this.props.list.map((item,i)=>{if(this.props.eIndx===i) 
   {alert("s")}else{alert("sd")}});

}
render(){
    return(
       <div>
         <form onSubmit={this.handleSubmit}>
           <input type="text" value={this.state.editedVal?this.state.editedVal:this.props.eVal} onChange={this.handleChange}/>
           <input type="submit" value="update"/>
         </form>
       </div>
    );
}
}

 export default UpdateItem;

addlist.js

   class AdList extends Component{
   constructor(props){
  super(props);
  this.state={value:'',disArrList:[],editVal:'',editIndx:''}
  this.handleChange=this.handleChange.bind(this);
  this.handleSubmit=this.handleSubmit.bind(this);
  this.delItemRow=this.delItemRow.bind(this);
  this.updateItemRow=this.updateItemRow.bind(this);
  this.editItemValue=this.editItemValue.bind(this);

}

 editItemValue(e)
 {
    alert("edit");
 }

delItemRow(itemName)
{this.setState({disArrList:this.state.disArrList.filter(e1=>e1!==itemName)}) 
;

}

updateItemRow(itemName,itemId)
{
       this.setState({editVal:itemName,editIndx:itemId});
    alert(itemId +"==========="+itemName);
}


handleChange(e){
    this.setState({value:e.target.value});
}

handleSubmit(e){
    e.preventDefault();
    //alert("submit"+this.state.value);
    let mycolletion=this.state.disArrList.concat(this.state.value);
    this.setState({disArrList:mycolletion});
}


render(){
    return(
        <div>
            <div className="Todo">
                <form onSubmit={this.handleSubmit}>
                    <input type="text" value={this.state.value} onChange={this.handleChange}/>
                    <input type="submit" value="Add" />
                </form>
            </div>
            <div>
               <DisplayList  list={this.state.disArrList} removeItem={this.delItemRow} updateItem={this.updateItemRow}/>
            </div>
            <div>
                <UpdateItem list={this.state.disArrList} editItem={this.editItemValue} eVal={this.state.editVal} eIndx={this.state.editIndx}/>
            </div>

        </div>
        );
}
 } 

export default AdList;

check update js

Tested
– Tested

2018-08-19 17:53:39 +00:00
Commented Aug 19, 2018 at 17:53 — Tested
– Tested, Commented Aug 19, 2018 at 17:53

AKX · Accepted Answer · 2018-08-19 17:36:40Z

3

ifs are statements, not expressions. You'll have to use a braced arrow function to use if.

this.props.list.map((item, i) => {
  if (this.props.eIndx === i) {
    alert("s");
  } else {
    alert("sd");
  }
  // map should always return something,
  // or you'll end up with a list of `undefined`s.
  //Otherwise use `forEach`.
  return 'something';
});

answered Aug 19, 2018 at 17:36

AKX

171k16 gold badges147 silver badges229 bronze badges

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

4 Comments

Bergur Over a year ago

One note: forEach would be better suited for a check rather than map which should return a modified item.

Tested Over a year ago

Nope those r not statement they gonna be exprsions

AKX Over a year ago

@Hafsah What... do you mean?

Tested Over a year ago

thats ma edit functionality logic depeding on the index m updating that row actully

Imanali Mamadiev · Accepted Answer · 2018-08-19 17:59:13Z

0

Use .forEachinstance of Map function, .map function returns in result as array , and .forEach just looping.

For example:

this.props.list.forEach((item, i) => {
  if (//your logic) {
    // to do 
  } else {
    //stuff
  }
});

If You want get Array in result use .map and You need to return something on each loop:

this.props.list.map((item, i) => {
  if (//your logic) {
    return // to do;
  } else {
    return //stuff;
  }
});

edited Aug 19, 2018 at 17:59

answered Aug 19, 2018 at 17:55

Imanali Mamadiev

2,6642 gold badges17 silver badges24 bronze badges

1 Comment

Tested Over a year ago

but then i need to return array

Qubaish Bhatti · Accepted Answer · 2018-08-19 20:12:37Z

0

You can also use filter if you have only one condition and it will also return array.

this.props.list.filter((item, i) => this.props.eindex === i ? "do something" : "else dont")

answered Aug 19, 2018 at 20:12

Qubaish Bhatti

7486 silver badges23 bronze badges

Comments

Tested · Accepted Answer · 2018-08-20 02:21:47Z

0

worked like charm use splice method

this.props.list.splice(checkIndex,1,this.state.editedVal);

answered Aug 20, 2018 at 2:21

Tested

7894 gold badges16 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to write "if" condition in my loop getting syntax error and update a row in list

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related