Getting 1 array from nested array and store into react state

Question

New react enthusiast here needing a little bit of help.

So I have this set of array store in a state called projects

0:{id: 1, title: "Business Web", category: "Web Design", deleted_at: "0000-00-00 00:00:00"}
1:{id: 2, title: "Social App", category: "Mobile Development", deleted_at: "0000-00-00 00:00:00"}
2:{id: 3, title: "Ecommerce", category: "Web Development", deleted_at: "0000-00-00 00:00:00"}
3:{id: 4, title: "1", category: "1", deleted_at: "0000-00-00 00:00:00"}
4:{id: 5, title: "123123", category: "123123", deleted_at: "0000-00-00 00:00:00"}
5:{id: 6, title: "new", category: "new", deleted_at: "0000-00-00 00:00:00"}
6:{id: 7, title: "sdasd", category: "sdawd", deleted_at: "0000-00-00 00:00:00"}
7:{id: 8, title: "sssss", category: "ssssss", deleted_at: "0000-00-00 00:00:00"}
8:{id: 9, title: "Irene", category: "Bae", deleted_at: "0000-00-00 00:00:00"}
9:{id: 10, title: "sssss", category: "sssss", deleted_at: "0000-00-00 00:00:00"}

And Im using this to this to store an item into state called projectItem

this.setState({
   projectItem: this.state.projects.filter(p => p.id === id)
})

which give me a result of something like this..

0: {id: 1, title: "Business Web", category: "Web Design", deleted_at: "0000-00-00 00:00:00"}

Now when I try to access this state and set it as initial value for input, its not working. I set value like this

value={this.state.projectItem.title}

Can you please help me where did I go wrong? Or am I doing this the wrong way? Thank you in advance.

Are you actually storing your filtered element into setState, or are you just assuming that's what's happening? What error are you getting? Where is id coming from? This is not a complete example. — zfrisch
– zfrisch, Commented Mar 20, 2018 at 20:57
Actually I dont get any errors. And yes its storing in the projectItem state but I cant access the items. — Sonson Ixon
– Sonson Ixon, Commented Mar 20, 2018 at 21:01

dhilt · Accepted Answer · 2018-03-20 21:00:23Z

1

Array.prototype.filter returns an array, so to get an item you may do something like

cont filtered = this.state.projects.filter(p => p.id === id);
this.setState({
  projectItem: filtered.length ? filtered[0] : null
});

Maybe you want to find item instead:

this.setState({
  projectItem: this.state.projects.find(p => p.id === id);
});

edited Mar 20, 2018 at 21:00

answered Mar 20, 2018 at 20:56

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

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

2 Comments

Sonson Ixon Over a year ago

Wow. That works like a charm. Can you explain to me how this works? and where did I go wrong? Anyways thanks kind sir.

dhilt Over a year ago

@SonsonIxon Just use find instead of filter. I updated the answer with the links to MDN, which can be helpful for you.

Ariel Haim · Accepted Answer · 2018-03-20 21:00:21Z

0

Your issue is that filter returns an array and not a single object.

Try assigning

this.setState(
    projectItem: this.state.projects.filter(p => p.id === id)[0]
})

answered Mar 20, 2018 at 21:00

Ariel Haim

867 bronze badges

2 Comments

Sonson Ixon Over a year ago

Wow. This works too. I have search how to flatten an array but none of it works. This is amazing.

Ariel Haim Over a year ago

You don't need to flatten an array, you need the content of the array item to be assigned to the value on the input tag. In your original code you assign the array itself as the value of the attribute

Collectives™ on Stack Overflow

Getting 1 array from nested array and store into react state

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related