how to get the index of selected element in react native array

Question

I want an index of the selected element in the react native array. I tried with indexOf() but it always returns -1. School is my array & email contains the value of the element whose index to find.

deleteDetails = (email) => {
  var index = School.indexOf(email);
}

Answer 1

As per your comment, School is an array of object, hence you need to use findIndex instead of indexOf

var arr = [{
  email: "[email protected]",
  remarks: "tt",
  slno: 1
}, {
  email: "[email protected]",
  remarks: "ttt",
  slno: 2
}, {
  email: "[email protected]",
  remarks: "tttt",
  slno: 3
}, {
  email: "[email protected]",
  remarks: "4",
  slno: 4
}];

function getIndex(email) {
  return arr.findIndex(obj => obj.email === email);
}

console.log(getIndex("[email protected]"));

Hope this will help!

Answer 2

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

According to documentation, indexOf returns -1 only when value is not found in array. Check your School array and email value before calling indexOf. You can use debugger or just simply add console.log before calling indexOf.

deleteDetails = (email) => {
  console.log(email);
  console.log(School);
  var index = School.indexOf(email);
}

If your email element is string "[email protected]", your array should contain string elements.

var email = "[email protected]";
var emails = ["[email protected]", "[email protected]"];
console.log(emails.indexOf(email));
// expected output: 0

Edit: Considering comments below, your callback method should return the index of the element. So deleteDetails function should be like this.

deleteDetails(email, index) {
      // code
    }

Let's consider Flatlist for listing.

<FlatList
        data={this.props.data}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />

_renderItem = ({item, index}) => (
<MyListItem
  id={item.id}
  onPressItem={this._onPressItem}
  selected={!!this.state.selected.get(item.id)}
  title={item.title}
  onDeleteButtonPressed={(item, index) => this.deleteDetails(item,index)}
/>
);

And you must create an onDeleteButtonPressed prop and call it when button pressed in component to trigger deleteDetails function.

Answer 3

If You are using Flatlist then;

renderDataItem = ({item, index}) => {
return (
  <TouchableWithoutFeedback
    onPress = {() => Actions.testing2({ sayi : index })}>
    <View style = {styles.allCointer}>
      <View style = {styles.textContainer}>
        <Text style={styles.textContainerTitle}> {item.Title} </Text>
        <Text style={styles.textContainerText}> {item.Description} </Text>
      </View>
      <Image
        style = {styles.image}
        source = {{uri : item.Files[0].FileUrl}}
      />
    </View>
  </TouchableWithoutFeedback>
)}

index parameter in that line,

renderDataItem = ({item, index}) => {

is your current index value.