SectionList contains FlatList implementations for a row of multiple items

import React from 'react';
import {
  SectionList,
  TouchableOpacity,
  Text,
  View
} from 'react-native';
import styles from './Selector.style'

const section = [
    {title: 'Department Classification', data:[[
        {id:'0', title: 'the general', tag: 1},
        {id:'1', title: 'Management Information Department', tag: 1},
        {id:'2', title: 'High Performance Department', tag: 1},
        {id:'3', title: 'Technology Cloud', tag: 1},
        {id:'4', title: 'Big Data Department', tag: 1},
        {id:'5', title: 'New Media Department', tag: 1},
        {id:'6', title: 'Internet of Things Hub', tag: 1},
        {id:'7', title: Ministry of Scientific Research and Information Technology, tag: 1},
        {id:'8', title: 'Amazon Cloud', tag: 1},
        {id:'9', title: 'Mining University Affiliated Middle School', tag: 1},
        {id:'10', title: 'Management Cloud', tag: 1},
        {id:'11', title: 'Ningbo Materials Institute', tag: 1},
        {id:'12', title: Yao Di Soo, tag: 1},
      ]]
    },
    {title: 'Distribution classification', data:[[
        {id:'13', title: 'Machine distribution', tag: 2},
        {id:'14', title: 'User Distribution', tag: 2},
        {id:'15', title: 'Storage distribution', tag: 2},
        {id:'16', title: 'Backbone Traffic Chart', tag: 2},
        {id:'17', title: 'Machine room distribution', tag: 2},
        {id:'18', title: 'Internet of Things Identification Node', tag: 2},
        {id:'the', title: 'Monitoring equipment', tag: 2},
      ]]
    },
  ];

export default class Selector extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      hasSelected1: '0',
      hasSelected2: '13',
    }
  }
  changeSelect1 = (id) => {
    this.setState(
      {
        hasSelected1: id,
      }
    );
  };

  changeSelect2 = (id) => {
    this.setState(
      {
        hasSelected2: id,
      }
    );
  };

  renderSectionHeader = ({section}) => (
    <Text style={styles.header}>{section.title}</Text>
  );

  renderSectionListItem = ({item}) => (
    <View style={styles.item}>
    {
      item.map((item, i) => (
        this.renderItem(item, i)
      ))
    }
    </View>
  );

  renderItem = (item, i) => (
    <TouchableOpacity
      key={i}
      onPress={
        () => item.tag === 1 ? this.changeSelect1(item.id):
          this.changeSelect2(item.id)
      }
      style={[styles.touch,
        item.tag === 1 ?
          {backgroundColor: this.state.hasSelected1 === item.id? '#00bfff':'lightgrey',}:
          {backgroundColor: this.state.hasSelected2 === item.id? '#00bfff':'lightgrey',}
      ]}
    >
      <Text style={styles.text}>{item.title}</Text>
    </TouchableOpacity>
  );

  render() {
    return (
      <SectionList
        sections={section}
        keyExtractor={(item, index) => item + index}
        renderItem={this.renderSectionListItem}
        renderSectionHeader={this.renderSectionHeader}
        columnWrapperStyle={{borderWidth:3, borderColor:'#f4f4f4'}}
      />
    );
  }
}

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  touch: {
    width: sectionWidth,
    height: sectionHeight,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 5,
    marginBottom: 5,
    borderRadius:15
  },
  text: {
    textAlign: 'center',
    color: 'black',
    fontSize: 12,
    paddingTop: 2
  },
  header: {
    fontSize: 18,
    color: 'black',
    paddingHorizontal: 10,
    paddingTop: 30,
    paddingBottom: 15,
    backgroundColor: '#f4f4f4'}});Copy the code