1

I am having problem while looping.

I am always getting an extra button. Please help.

{this.state.items.map(myitems1 => {
    return (
       <div key={myitems1.Id}>
           <span>{myitems1.Item_x0020_Name}</span>
           <button onClick={e => this.dosometing(myitems1.Id)}>Offline</button>
       </div>
    );
})}

I can see the collection has only three (3) values, But I am getting 4 buttons on screen.

enter image description here Getting always extra

  • collections started always on index 0, so if you have 3 like 3 items, there are 4 items in collection, so do collection.count-1, otherwise you shoud have 2 (0,1,2) > solution is probably to skip index 0 – Zdeněk Vinduška Jan 25 at 22:25
  • ok thank you . Got it . As I am new .. how can I skip the index ? – BISWANATH HALDER Jan 26 at 4:38
1

Try something like this, i am not an spfx man :D : You can also check, if the ItemName is not empty, cause in the first case it is, this is reason why you have only button, not text:

{this.state.items.map(myitems1 => {
    if(myitems1.Item_x0020_Name != "")
    {
       return (
          <div key={myitems1.Id}>
              <span>{myitems1.Item_x0020_Name}</span>
              <button onClick={e => this.dosometing(myitems1.Id)}>Offline</button>
          </div>
       );
    }
})}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.