javascript - select upto 3 in category list from array in list in react.js

Question

I am working in react, fixed-sized array but I am not getting output when I am select up to 3 record but it show only 1 record select.

CODE:

this.state = { 
    type: [3],  //select upto 3 record(type select from category)
    categoryList: null,  //  category-list
};
changeCategory(o){
    this.setState({type: o})
} 
<div>
{ categoryList.map((o,index)=>{
  return <div key={index} className={"rounded " +  (type==o.slug ?"selected" : '')} onClick={()=>this.changeCategory(o.slug)} style={{padding: "2px 5px"}}>{o.name}</div>
  })
}
</div>

question from:https://stackoverflow.com/questions/65840111/select-upto-3-in-category-list-from-array-in-list-in-react-js

Answer 1

ISSUE

type is a state array and you are comparing it like the value in the render method. In this way, you always have just one item selected instead of 3 items.

SOLUTION

This code will help you to select 3 items

this.state = { 
    type: [], 
    ....
};

// this will add selected item in `type` array if length not exceed
changeCategory(o){
  if(type.length !== 3){ // for limit of 3
    const newType = [...this.state.type];
    newType.push(o.slug);
    this.setState({type: newType});
  }
}

<div>
  {categoryList.map((o, index) => {
    return (
      <div
        key={index}
        className={
          "rounded " + (this.state.type.includes(o.slug) ? "selected" : "")
        }
        onClick={() => this.changeCategory(o.slug)}
        style={{ padding: "2px 5px" }}
      >
        {o.name}
      </div>
    );
  })}
</div>