Skip to content

List collapses on state (data) change #92

@adam-nmth

Description

@adam-nmth

Hey,

really neat library you got here! My only problem so far, is when I want to change my data structure via setState(), the whole list collapses, and I have to start opening everything again.

Is there a way to go around this? (I couldn't find any similar cases in the examples, nor the Issues on github.

export default class ExampleApp extends React.Component {
  state = {
    currentList: data
  }

  getChildrenName = node => {
    return 'children';
  }

  addItem = () => {
    this.setState({
      currentList: [
        ...this.state.currentList.slice(0, 0), // 2018 year
        {
          ...this.state.currentList[0],
          children: [
            ...this.state.currentList[0].children.slice(0, 0), // oktober first month
            {
              ...this.state.currentList[0].children[0],
              children: [
                ...this.state.currentList[0].children[0].children.slice(0, 0),
                {
                  name: 'SORELEJE'
                },
                ...this.state.currentList[0].children[0].children.slice(1)
              ]
            },
            ...this.state.currentList[0].children.slice(1)
          ]
        },
        ...this.state.currentList.slice(1)
      ]
    })
  }

  renderItem = (node, level) => {
    console.log('Level', level);
    return (
      <View
        style={{ paddingLeft: 12, flexDirection: 'row', alignItems: 'center' }}
      >
        <Text style={{ marginRight: 24 }}>{node.name}</Text>
        {level == 2 && (
          <TouchableOpacity onPress={this.addItem} >
            <Icon name="add" size={30} />
          </TouchableOpacity>
        )}
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <NestedListView
          data={this.state.currentList}
          getChildrenName={this.getChildrenName}
          renderNode={(node, level) => (
            <NestedRow
              level={level}
              paddingLeftIncrement={0}
              style={{ borderColor: 'black', borderWidth: 1 }}
            >
              {this.renderItem(node, level)}
            </NestedRow>
          )}
        />
      </View>
    );
  };
}

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions