react native passing array in cloneWithRows

Question

I want to pass an array to the cloneWithRows method. below is the code

export default class FirstReactNativeApp extends Component {

          constructor() {
            super();
            const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

          this.state = {
            modalVisible: false,
            todoText:'',
            todoListArray:['foo 1','foo 2'],
           dataSource: ds.cloneWithRows(this.state.todoListArray)

          };
        }

This is the Listview

<ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{JSON.stringify(rowData)</Text>}
/>

I'm getting the error undefined is not an object(evaluating '_this.state.todoListArray')

I'm not able to resolve this.Please guide me!

Thanks

vinayr · Accepted Answer · 2017-03-02 07:35:31Z

3

Try this -

constructor() {
  super();
  this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

  this.state = {
    modalVisible: false,
    todoText:'',
    todoListArray:['foo 1','foo 2'],
  };
}

<ListView
        dataSource={this.ds.cloneWithRows(this.state.todoListArray)}
        renderRow={(rowData) => <Text>{JSON.stringify(rowData)</Text>}
/>

answered Mar 2, 2017 at 7:35

vinayr

11.3k3 gold badges49 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shruti Nair Over a year ago

While using this its still gave the error undefined is not an object(evaluating '_this.ds.cloneWithRows')

vinayr Over a year ago

that's because you didn't change const ds to this.ds

arjun · Accepted Answer · 2017-03-02 07:36:07Z

1

You are accessing the state object before setting it. so it returns undefined. Try like this

export default class FirstReactNativeApp extends Component {

      constructor() {
        super();
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

      this.state = {
        modalVisible: false,
        todoText:'',
        todoListArray:['foo 1','foo 2'],
       dataSource: ds.cloneWithRows(['foo 1','foo 2'])

      };
  }

Then later when todoListArray content changes, you can set it to dataSource as

this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.state.todoListArray),
              });

answered Mar 2, 2017 at 7:36

arjun

3,5745 gold badges30 silver badges51 bronze badges

Comments

Shruti Nair · Accepted Answer · 2017-03-02 07:43:13Z

0

The above answer given by vinayr gave me a clue.

      this.state = {
        modalVisible: false,
        todoText:'',
        todoListArray:['foo 1','foo 2'],
        dataSource: ds

      };

and then in the List View

<ListView
  dataSource= {this.state.dataSource.cloneWithRows(this.state.todoListArray)}
  renderRow={(rowData) => <Text>{rowData}</Text>} />

It works!

Thanks

answered Mar 2, 2017 at 7:43

Shruti Nair

2,0449 gold badges32 silver badges60 bronze badges

Collectives™ on Stack Overflow

react native passing array in cloneWithRows

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related