Unable to setItem in AsyncStorage

user_2741011 0
Viewed 343

I'm unable to setItem with AsyncStorage. Following is my code. So I'm getting the name in state from a TextInput and then want to store it in AsyncStorage onPress of TouchableOpacity. I'm getting error:

enter image description here

import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity} from 'react-native';

class AsyncStorage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            name:''
        }
        //this.asyncSetName = this.asyncSetName.bind(this)   //tried this too.
   };

    asyncSetName(){
        let name = this.state.name
        AsyncStorage.setItem('name', name);
    }

    render(){
        <View>
            <TextInput
                placeholder='Set Name here'
                onChangeText={(name) => this.setState({name})}
                value={this.state.name}
                autoCorrect={false}
            ></TextInput>

            <TouchableOpacity
                onPress={this.asyncSetName.bind(this)}
            >
                <Text>SetName</Text>
            </TouchableOpacity>
        </View>
    }
}

What am I doing wrong? Please help.

asyncstorage react-native reactjs
2 Answers

You need to import AsyncStorage from react-native

import { View, Text, StyleSheet, TextInput, TouchableOpacity , AsyncStorage} from 'react-native';

You will also need to keep the binding of asyncSetName function

uncomment this line 

this.asyncSetName = this.asyncSetName.bind(this)

Also as spotted by @Chris you need to change your class name to be different from AsyncStorage

user_63946440
  1. As @Amir said, you need to import AsyncStorage from react-nativeas well as keep the binding as he suggests.
  2. You'll probably want to rename your class to something other than AsyncStorage too at this point
  3. Optionally, you might want to namespace your AsyncStorage key. It's common to put an @AppName in front of the key, so your final key would end up being @AppName${this.state.name}. But again, this is optional and merely convention.
user_13492690
Related