How to implement <List.Accordion from react-native-paper using arrays?

Question

I'm having some difficulty using <List.Accordion in arrays. I would like change a title color when it's open. Follow a snack with error. https://snack.expo.io/@cxrocha/list.accordion

Answer 1

import React, { useState } from 'react';
import { List } from 'react-native-paper';
import { View, Text, ScrollView } from 'react-native';

const DropDownComponent = () => {
  const [expanded, setExpanded] = useState(true);
  const [selectedItem, setSelectedItem] = useState('');
  const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' },
  ];

  const handlePress = () => {
    setExpanded(!expanded);
  };
  return (
    <View>
      <List.Section title="List of Items">
        <ScrollView>
          <List.Accordion
            title={selectedItem}
            expanded={expanded}
            onPress={handlePress}>
            {items.map((item) => (
              <List.Item
                onPress={() => {
                  setSelectedItem(item.name);
                  setExpanded(!expanded);
                }}
                title={item.name}
              />
            ))}
          </List.Accordion>
        </ScrollView>
      </List.Section>
    </View>
  );
};

Answer 2

This is a way to achieve array data.

     render = () => {
        if (this.state.Data) {
          let uiItems = [];
          for (const obj of this.state.Data) {
            uiItems.push(
              <List.Section >
                <List.Accordion
                  title={obj.Title}
                  left={(props) => <List.Icon {...props} icon="folder" />}>
                  <List.Item title={obj.Description} descriptionNumberOfLines={16}/>
                </List.Accordion>
              </List.Section>,
            );
          }
          return uiItems;
        } else {
          return null;
        }
      };
    
      render() {
        {
          return (
            <View style={{flex: 1}}>
              {this.render()}
            </View>
          );
        }
      }