...i'm getting issues inreact native modal click change flatlist text.

i want when i click on modal ok button accept text in flatlist changes to pending

here is my code ...

...i'm getting issues inreact native modal click change flatlist button color.

i want when i click on modal ok button accept text in flatlist changes to pending

here is my code ...

... im new to react native i try it many times to solve but fail please help...

  import React from 'react';
import { SafeAreaView, View, FlatList,Pressable, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];



const App = () => {
   const [active, setactive] = useState(false);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
   <Pressable  onPress={() => setactive(!active)}>
        <Text>accept</Text>
   </Pressable>

  </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
 <Modal
        animationType="slide"
        transparent={true}
        visible={active}
        onRequestClose={() => {
          setDetails(null)
          console.warn("closed");
        }}>
    <Pressable  onPress={() => [handleListing(), setactive(!active)]}>
         <Text>ok</Text>
         </Pressable>
   </>Modal
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

CodePudding user response：

I didn't get exactly but as far as i understand you're trying to do this;

Change accept text with this line:

 <Text>{modalOkPressed ? "Pending" : "accept"}</Text>

then add this usestate below "active-setactive"

const [modalOkPressed, setModalOkPressed] = useState(false)

then replace pressable line which contains "ok" with this line;

<Pressable onPress={() => [setactive(!active), setModalOkPressed(true)]}>

now when u press to "Ok", "modalOkPressed will be equal to true and text will be "pending" instead of "accept".

You may use if else statement in one line like this:

{modalOkPressed ? "Pending" : "accept"}

CodePudding user response：

Here is my result: I think the @Emre özcan's result is correct. The current code is working with maintaining your original code as much as possible. I only arranged them.

import React from 'react';
import { SafeAreaView, View, FlatList,Pressable, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const App = () => {
   const [active, setactive] = useState(false);
   const [modalOkPressed, setModalOkPressed] = useState(false);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
    <Pressable onPress={() => {
        setactive(!active);
    }}>
        <Text>
           {modalOkPressed ? "Pending" : "accept"}
        </Text>
   </Pressable>

  </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
      <Modal
        animationType="slide"
        transparent={true}
        visible={active}
        onRequestClose={() => {
          setDetails(null)
          console.warn("closed");
        }}>
      <Pressable  onPress={() => {
        handleListing();
        setactive(!active);
        setModalOkPressed(true);
      }}>
         <Text>ok</Text>
         </Pressable>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

CodePudding user response：

I guess I understood, you can add extradata to flatlist;

create a state called selectedIndex (or whatever u want) and set the value of selectedIndex with onPress Function,

We have unique id's in data so we can set selectedIndex(item.id) then create single line if else statement to check if our selected(pressed) id is equal to selectedIndex and then return text according to it

Can you try this code now ?

const App = () => {
const [active, setactive] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(null)

const renderItem = ({ item }) => (
    <View style={styles.item}>
        <Text style={styles.title}>{item.title}</Text>
        <Pressable onPress={() => {
            setactive(!active);
            setSelectedIndex(item.id);
        }}>
            <Text>
                {selectedIndex === item.id ? "Pending" : "Accept"}
            </Text>
        </Pressable>

    </View>
);
return (
    <SafeAreaView style={styles.container}>
        <FlatList
            data={data}
            renderItem={renderItem}
            keyExtractor={item => item.id}
            extraData={selectedIndex}    // add extra data to flatlist
        />
        <Modal
            style={styles.modal}
            animationType="slide"
            transparent={true}
            visible={active}
            onRequestClose={() => {
                setDetails(null)
                console.warn("closed");
            }}>
            <Pressable onPress={() => {
                handleListing();
                setactive(!active);
            }}>
                <Text>Ok</Text>
            </Pressable>
        </Modal>
    </SafeAreaView>
);}