Add object to an array and refresh the sectionList

Question

I added a new object of contact and trying to show it in SectionList. But when I trying to put an object to array I'm getting an error: TypeError: undefined is not an object (evaluating 'n.data.length')

I used the instructions in this link to solve the problem. how to add a new object as a value to an array in the react state

constructor(props) {
    super(props);   

    this.state = {
      contacts : [],
      newContactDialogVisible: false,
      contactName : '',
      contactPhone : ''
    }
  }

refreshContactsList = () => {
    const newContact = {'name': this.state.contactName, 'phone': this.state.contactPhone};
    Alert.alert(newContact.name + " " + newContact.phone); // Alert working and shows the right data
    this.setState({ contacts: [...this.state.contacts, newContact] });
  }

<SectionList
            sections={this.state.contacts}
            renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
          />

score 1 · Answer 1 · answered Jun 14 '19 at 14:49

1

You didn't use the solution of the link correctly. Missing wrapping brackets.

this.setState(state => ({
  contacts: [...state.contacts, newContact]
}));

I think you can go shorter with

this.setState({ contacts: [...this.state.contacts, newContact] });

And I would like to add that

this.refreshContactsList = this.refreshContactsList.bind(this);

is not necessary since refreshContactList is an arrow function and you won't lose this pointer inside. If you declare it as refreshContactList() {...} you need to bind this.

answered Jun 14 '19 at 14:49

schogges

351
5
12

You are right, I have corrected. But now I'm getting an error: TypeError: undefined is not an object (evaluating 'n.data.length') – Iliya Gaponov Jun 14 '19 at 14:57
Can you please log `this.state.contacts` right before `setState`? – schogges Jun 14 '19 at 15:38
And please remove single quotes (`'`) of property names of `newContact` :) – schogges Jun 14 '19 at 15:40
I think my problem is with contacts declaration. I did an Alert to this.state.contacts (console.log not working for me) and it restart my app (I'm using expo) . – Iliya Gaponov Jun 14 '19 at 16:29
Something wrong with putting a newContact inside ```this.setState({ contacts: [...this.state.contacts, newContact] });``` because contacts is array of objects – Iliya Gaponov Jun 14 '19 at 16:32

Iliya Gaponov · Answer 2 · 2019-06-15T09:35:29.693

1

Finally I found the right syntax of how to it:

refreshContactsList = () => {
    const newContact = {data: [{name:this.state.contactName, phone:this.state.contactPhone}]};
    this.setState({ contacts: [...this.state.contacts, newContact]})
  }

edited Jun 15 '19 at 09:35

answered Jun 14 '19 at 16:46

Iliya Gaponov

39
1
1
7

nice :) so this is kinda expo thing that you need to add `data` attribute? – schogges Jun 14 '19 at 18:15

score 0 · Answer 3 · answered Jun 14 '19 at 13:31

0

I think the issue is with the wrong arrow function syntax. Try this

this.setState(state => {
    return {contacts: [...state.contacts, newContact]};
});

answered Jun 14 '19 at 13:31

Aditya

771
5
11

When there is a open brace after the => symbol it treats that as body of the function instead of returning it as an object. – Aditya Jun 14 '19 at 13:33
Thank you for response. But now I'm getting an error: TypeError: undefined is not an object (evaluating 'n.data.length'). I think I don't need to return something, because the setState is making the work – Iliya Gaponov Jun 14 '19 at 13:54

Add object to an array and refresh the sectionList

3 Answers3