javascript - React Native/TypeScript - How to manage state in functional component and apply flexible style with FlatList

Question

Can anyone tell me how to solve these things?
1.if the list is pressed, I'd like to change the background color of the list beige(#FFF5E7) to white(#FBFBFB)
2.Also, I'd like to change the read value of the Object fales to true with useState

Problem is that if I pressed the list, whole background color of the list will be changed.

index.tsx

import React, { useState } from 'react';
import { Text, View, TouchableOpacity, FlatList } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { DETAIL } from '../../sample';
import { Object } from './sample';

export default function sample() {
  const [state, setState] = useState(Object);
  const navigation = useNavigation();
  let Element;

  const renderItem = ({ item }) => {
    const readState = () => {
      navigation.navigate(NOTICE_DETAIL);
      const readValue = [...state];
      let value = { ...readValue[0] };
      value.read = true;
      readValue[0] = value;
      setState(readValue);
    };
    if (state[0].read) {
      Element = (
        <TouchableOpacity onPress={readState}>
          <View style={[styles.row, { backgroundColor: '#FBFBFB' }]}>
            <View style={styles.container}>
              <View style={styles.end}>
                <Text style={styles.text}>{item.text}</Text>
                <Text style={styles.time}>{item.time}</Text>
              </View>
              <Text style={styles.content}>{item.content}</Text>
            </View>
          </View>
        </TouchableOpacity>
      );
    } else {
      Element = (
        <TouchableOpacity onPress={readState}>
          <View style={[styles.row, { backgroundColor: '#FFF5E7' }]}>
            <View style={styles.container}>
              <View style={styles.end}>
                <Text style={styles.text}>{item.text}</Text>
                <Text style={styles.time}>{item.time}</Text>
              </View>
              <Text style={styles.content}>{item.content}</Text>
            </View>
          </View>
        </TouchableOpacity>
      );
    }
    return Element;
  };
  }

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        extraData={Object}
        data={Object}
        renderItem={renderItem}
      />
    </View>
  );

}

Object.ts

export const Object = [
 {
  id: 1,
  text: 'testtesttest',
  content: 'testtesttest'
  read: false
},
{ 
  id: 2,
  text: 'testtesttest',
  content: 'testtesttest'
  read: false
}
  id: 3,
  text: 'testtesttest',
  content: 'testtesttest'
  read: false
}
]

question from:https://stackoverflow.com/questions/66059939/react-native-typescript-how-to-manage-state-in-functional-component-and-apply

Answer 1

We can add inline styles into the component style props along with static styles,

For Example:

<TouchableOpacity onPress={readState}>
    <View style={[styles.row, { backgroundColor: item.read ? '#FBFBFB' : 'FFF5E7' }]}>
        <View style={styles.container}>
          <View style={styles.end}>
            <Text style={styles.text}>{item.text}</Text>
            <Text style={styles.time}>{item.time}</Text>
          </View>
          <Text style={styles.content}>{item.content}</Text>
       </View>
    </View>
</TouchableOpacity>