CODEWITHSUNDEEP
reactjsmap-functionreact-typescript
Deepika
Deepika

Reputation: 747

How to get the index of an array map , out of the map function in React

I am working on a React Typescript project. In here for a usage I need to get the index of the array map() to another function.

        <select className="form-control" value={cbnState} onChange={(e) => showDemographicInfo(e)}>
           {cbnArray.map((item: any, index:any) => (
              <option value={item.cbn}>{item.cbn} | {item.unit} | {index}</option>
            ))}
        </select>

In here I want to pass thin index to OnChange function (showDemographicInfo)

This is the code of onChange function

const showDemographicInfo = (event: any) => {    
if (cbnList.length > 1 && cbnState === COMBINED) {
  setLeftArrowClass(ClassModifier.IN);
  setRightArrowClass(ClassModifier.IN);
}
setCbnState(event.target.value);

if (event.target.value !== COMBINED) {
  updateUserId(event.target.value);
  setCombinedState(false);
  setUnit(unit);
} else {
  setCombinedState(true);
  updateUserId(cbnArray[1]);
}

console.log("Index ",cbnArray[]);

};

In this cbnArray[] I need to add the index. Like cbnArray[index value].

Can anyone tell me how can I do that. I tried for a long time and couldn't find a solution

Upvotes: 0

Views: 1577

Answers (1)

somallg
somallg

Reputation: 2043

Simply access selectedIndex of select element will give you the selected index

  const showDemographicInfo = (event: any) => {
    const select = event.target;
    console.log(select.selectedIndex);
  };

Working sandbox

Upvotes: 1

Related Questions