CODEWITHSUNDEEP
javascriptreact-nativereact-native-flatlist
Serenity Emmanuel
Serenity Emmanuel

Reputation: 95

How to get the get data of Flatlist Item in reactNative

I am trying to get the data of a flat list when onPressed is called the onpressed is called as I am using an alert but the selected data is not getting called

import React from "react";
import {StyleSheet,Text,View,FlatList,TouchableWithoutFeedback,} from "react-native";

const App = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          { key: "Devin" },
          { key: "Dan" },
          { key: "Jillian" },
          { key: "Jimmy" },
          { key: "Julie" },
        ]}
        renderItem={({ item }) => (
          <TouchableWithoutFeedback onPress={() => actionOnRow(item)}>
            <View>
              <Text style={styles.item}>Name: {item.key}</Text>
            </View>
          </TouchableWithoutFeedback>
        )}
      />
    </View>
  );
};

const actionOnRow = (item) => {
   const value = "Selected Item : "+ item;
  alert(value);
};
export default App;

I have check the react documentation but i can't find anything on flatlist item OnPress, when i run this the alert displays the message "Selected : " but i am expecting "Selected : 'the item selected' ".

Upvotes: 2

Views: 1770

Answers (2)

Serenity Emmanuel
Serenity Emmanuel

Reputation: 95

Answer in Full incase anyone else needs it

import React from "react";
import {StyleSheet,Text,View,FlatList,TouchableWithoutFeedback,} from "react-native";

const App = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          { key: "Devin" },
          { key: "Dan" },
          { key: "Jillian" },
          { key: "Jimmy" },
          { key: "Julie" },
        ]}
        renderItem={({ item }) => (
          <TouchableWithoutFeedback onPress={() => selectStudent(item)}>
            <View>
              <Text style={styles.item}>Name: {item.key}</Text>
            </View>
          </TouchableWithoutFeedback>
        )}
      />
    </View>
  );
};

const selectStudent = (item) => {
   const value = "Selected Student : "+ item.key;
  alert(value);
};
export default App;

Upvotes: 0

shubham choudhary
shubham choudhary

Reputation: 3120

you are using alert . Alert does not accept two arguments.

Try using console.log or alert("Selected :" + item.key);

Upvotes: 1

Related Questions