javascript map, grab first index with a certain element-CodePudding

As you can see from my snack expo example here, I am grabbing the first index and last index of my array successfully. I am doing this so I can add a borderRadius to the top and bottom of my view. I would eventually like to have a section for online users as well as a section for offline users.

I want to be able to grab the index of the first online user in the array regardless of its position in the array overall. So if the first three indexes have the status of offline, and the fourth index is online, I want to be able to grab that fourth index because it is the first time an online status appears.

For further clarification, if you look at my example, if the last index of the entire array had the status of online, the borderRadius would not be set. If the first index of the array did not have the status of online, the borderRadius would not be set.

grab first index in entire array regardless of status -> I need this to be the first online index, not the first index in entire array

else if(i == 0){
        return ()

grab last index in entire array -> I need this to be the last index with the online status, not the last index in the entire array

if (i   1 === List.length) {
        return ()

CodePudding user response：

You can compute the first and last indexes before iterating on your users list( see https://snack.expo.dev/83rFQLCrF )

const lastIndex = List.map(e => e.status).lastIndexOf('online');
const firstIndex = List.map(e => e.status).indexOf('online');

const renderList = (props) => {
    return List.map((item, i) => {
      /* grabs last index, I need to grab the last index with status online */
      if (i  === lastIndex) {
       // TO DO
      } 
      /* grabs first index, I need to grab the first index with status online */
      else if(i == firstIndex ){
       // TO DO
      }
      else{
         // TO DO
      }

    });
  };