SampleTaskList (no delete and edit)

SampleTaskList.js

import React from 'react';
import {
  View,
  SectionList,
  FlatList,
  SafeAreaView,
  Text,
  TouchableOpacity,
  Button,
  TextInput,
} from 'react-native';

export default class TestClass extends React.PureComponent {
  state = {
    textInputValue: '',
    items: [
      {
        label: 'incomplete tasks',
        id: 'incomplete',
        data: [
          {
            name: 'task1',
          },
        ],
      },
      {
        id: 'complete',
        label: 'complete tasks',
        data: [
          {
            name: 'task12',
          },
        ],
      },
    ],
  };

  changeInputValue = (data) => {
    this.setState({
      textInputValue: data,
    });
  };

  addToIncomplete = () => {
    if (this.state.textInputValue == '') {
      return;
    }
    this.setState((state) => {
      return {
        textInputValue: '',
        items: [
          {
            ...state.items[0],
            data: [
              ...state.items[0].data,
              {
                name: state.textInputValue,
              },
            ],
          },
          {
            ...state.items[1],
          },
        ],
      };
    });
  };

  itemDataFilter = (sectionId, target, originalData, item) => {
    if (sectionId === target) {
      return originalData.filter((dItem) => dItem.name !== item.name);
    } else {
      return [...originalData, item];
    }
  };

  toggleItem = (section, item) => () => {
    this.setState((state) => {
      return {
        items: [
          {
            ...state.items[0],
            data: this.itemDataFilter(
              section.id,
              'incomplete',
              state.items[0].data,
              item,
            ),
          },
          {
            ...state.items[1],
            data: this.itemDataFilter(
              section.id,
              'complete',
              state.items[1].data,
              item,
            ),
          },
        ],
      };
    });
  };

  renderItem = (keys) => {
    const {section, item} = keys;
    return (
      <TouchableOpacity
        style={{height: 100, backgroundColor: 'rgba(255,255,255,0.1)'}}
        onPress={this.toggleItem(section, item)}>
        <Text style={{color: 'yellow'}}>{JSON.stringify(item)}</Text>
      </TouchableOpacity>
    );
  };

  headerComponent = ({section}) => {
    return (
      <View style={{width: '100%', backgroundColor: 'red'}}>
        <Text style={{fontSize: 30, color: 'silver'}}>{section.label}</Text>
      </View>
    );
  };

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'grey'}}>
        <SafeAreaView style={{paddingTop: 50, flex: 1}}>
          <View style={{flexDirection: 'row'}}>
            <TextInput
              style={{flex: 1, backgroundColor: 'white'}}
              onChangeText={this.changeInputValue}
              value={this.state.textInputValue}
            />
            <Button title={'Add'} onPress={this.addToIncomplete} />
          </View>
          <SectionList
            renderSectionHeader={this.headerComponent}
            sections={this.state.items}
            renderItem={this.renderItem}
            contentContainerStyle={{
              flexGrow: 1,
              backgroundColor: 'rgba(0,130,15,0.5)',
            }}
          />
        </SafeAreaView>
      </View>
    );
  }
}