CODEWITHSUNDEEP
javascriptreactjsreact-nativeasyncstorage
applechips
applechips

Reputation: 23

How to store user text input data into an array of objects in react native?

does anyone know how to store user text input data into an array of objects in React Native? 

[
  {
    note: ‘some note’,
    created_at: 123456789
  },
  {
    note: ‘another observation note’,
    created_at: 123456789
  }
]

I'm currently just using basic Asyncstorage. I have a text input field for a user to type in notes. It currently saves it as a string in an array. I want to know how to do this but with an array of objects. Also, how would I add the created_at time stamp?

Thank you :-)

Upvotes: 0

Views: 3494

Answers (1)

nbkhope
nbkhope

Reputation: 7474

Sounds more like a basic JavaScript question. In the context of React, you would simply store the list of notes in the component state (or application state, if using something like Redux).

Define an onChange event handler function for the text input and call setState with:

onSomeInputChange = (text) => {
  const note = {
    note: text,
    created_at: Date.now()
  };
  this.setState({ notes: [ ...this.state.notes, note ] });
}

The above assumes you have the state variable notes that holds an array of note objects. Using the spread operator, you can copy all the previous notes to a new array and then add the new note. You have to do that because state is immutable and cannot be modified directly.

Then pass that function to the onChange of your text input component:

<TextInput ... onChange={this.onSomeInputchange} />

Other props have been omitted.

Upvotes: 1

Related Questions