Dinamyc Card Color

// Data Dummy

const dummyData = [
    {
        'id': 1,
        'title': 'Hello World',
        'note': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
        'time': '24 Juni',
        'category': 'Wishlist'
    },
    {
        'id': 2,
        'title': 'Compass',
        'note': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
        'time': '24 Juni',
        'category': 'Work'
    },
    {
        'id': 3,
        'title': 'Lorem',
        'note': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
        'time': '24 Juni',
        'category': 'Learn'
    },
    {
        'id': 4,
        'title': 'Macbook',
        'note': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
        'time': '24 Juni',
        'category': 'Wishlist'
    },
    {
        'id': 5,
        'title': 'React Native',
        'note': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
        'time': '24 Juni',
        'category': 'Learn'
    },
    {
        'id': 6,
        'title': 'Notes App',
        'note': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
        'time': '24 Juni',
        'category': 'Work'
    },
];

module.exports = dummyData;


// Menampilkan Dummy Data dengan FlatList ke Component NoteCard

<View style={styles.content}>
      <FlatList
         data={Dummy}
         numColumns= {2}
         keyExtractor={(item, index) => index}
         renderItem={({item, index}) => {return(
         <NoteCard style={styles.content} item={item} index={index} />
         )}}
      />
</View>





// Component NoteCard


export default class CardHeaderFooterExample extends Component {

    constructor(props) {
        super (props)
        this.state = {
            color: 'green'
        }

        if (this.props.item.category == 'work') {
            this.setState({
                color: 'red'
            })
        }


    }

    render() {
        return (
            <TouchableOpacity style={styles.parentView}>
                <View style={{backgroundColor: this.state.color, borderRadius: 10, padding: 15}}>
                    <Text style={styles.date}>{this.props.item.time}</Text>
                    <Text style={styles.title}>{this.props.item.title}</Text>
                    <Text style={styles.category}>{this.props.item.category}</Text>
                    <Text style={styles.note}>
                        {this.props.item.note}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }
}