CardFunctionality.jsx

import React, { useState } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';

function App() {
  const [data, setData] = useState([
    {id: 1, name: 'preeti', mark: 0},
    {id: 2, name: 'kumudh', mark: 0},
    {id: 3, name: 'karuna', mark: 0},
    {id: 4, name: 'kanika', mark: 0},
  ])

  const handleIncrease = (id) => {
    setData((prev) => 
      prev.map((item) => 
        item.id === id ? {...item, mark: item.mark + 1} : item
      )
    )
  }

  const handleDecrease = (id) => {
    setData((prev) => 
      prev.map((item) =>
        item.id === id ? {...item, mark: item.mark - 1} : item
      )
    )
  }

  const renderItem = ({item}) => {
    return (
      <View style={{width: "100%", backgroundColor: 'orange', marginVertical: 10, padding: 10,}}>
        <Text>Id: {item.id}</Text>
        <Text>Name: {item.name}</Text>
        <Text>mark: {item.mark}</Text>
        <Button title='increase' onPress={() => handleIncrease(item.id)}/>
        <Button title='decrease' onPress={() => handleDecrease(item.id)}/>
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
})

export default App;