How to change state when Button pressed?

Question

I'm new to React Native and unfamiliar with js.

I want the program to show what I wrote in TextInput when I pressed the Button (there's a Text below the Button). I figured maybe I should make two state: put state1 text as Text input, and put state2 mimin as TextInput input, and when Button pressed, put state2 mimin to state1 text.

I've tried with the code below but it gave me Red Page when I click the Button.

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

export default class Hella extends Component {

constructor(props) {
    super(props);
    this.state = {text: '', mimin: ''};
}

render() {
   return (
       <View style={styles.container}>

        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(mimin) => this.setState({mimin})}
        />
        <Button
          onPress={onButtonPress}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
        <Text style={styles.instructions}>
          {this.state.text}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
  }
});

const onButtonPress = () => {
  Hella.setState({
      text: Hella.state.mimin  -------> where the error happened
    });
};

AppRegistry.registerComponent('Hella', () => Hella);

The error was

undefined is not an object (evaluating 'Hella.state.mimin')

onButtonPress
<project location>/index.android.js:61

What did I do wrong? How should I declare it? Where can I learn more?

Answer 1

Your onButtonPress should be inside class since you want to do setState

export default class Hella extends Component {
  constructor(props) {
    ...
  }

  onButtonPress = () => {
    this.setState({
      text: this.state.mimin
    });
  }

  render() {
    return (
      ...
      <Button
        onPress={this.onButtonPress}
        ...
      />
      ...
    );
  }
}

React Native uses a lot of React concepts. Learning basics of React will help you a lot https://facebook.github.io/react/tutorial/tutorial.html

Answer 2

The function definition should be like below.

onButtonPress = () => {
    this.setState({
      text: this.state.mimin
    });
}