import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
import { Text, TextInput, View } from 'react-native';
-export default class PizzaTranslator extends Component {
- constructor(props) {
- super(props);
- this.state = {text: ''};
- }
-
- render() {
- return (
- <View style={{padding: 10}}>
- <TextInput
- style={{height: 40}}
- placeholder="Type here to translate!"
- onChangeText={(text) => this.setState({text})}
- value={this.state.text}
- />
- <Text style={{padding: 10, fontSize: 42}}>
- {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
- </Text>
- </View>
- );
- }
+export default function PizzaTranslator() {
+ const [text, setText] = useState('');
+ return (
+ <View style={{padding: 10}}>
+ <TextInput
+ style={{height: 40}}
+ placeholder="Type here to translate!"
+ onChangeText={text => setText(text)}
+ defaultValue={text}
+ />
+ <Text style={{padding: 10, fontSize: 42}}>
+ {text.split(' ').map((word) => word && '🍕').join(' ')}
+ </Text>
+ </View>
+ );
}
TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.
For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕🍕🍕".
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
import { Text, TextInput, View } from 'react-native';
-export default class PizzaTranslator extends Component {
- constructor(props) {
- super(props);
- this.state = {text: ''};
- }
-
- render() {
- return (
- <View style={{padding: 10}}>
- <TextInput
- style={{height: 40}}
- placeholder="Type here to translate!"
- onChangeText={(text) => this.setState({text})}
- value={this.state.text}
- />
- <Text style={{padding: 10, fontSize: 42}}>
- {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
- </Text>
- </View>
- );
- }
+export default function PizzaTranslator() {
+ const [text, setText] = useState('');
+ return (
+ <View style={{padding: 10}}>
+ <TextInput
+ style={{height: 40}}
+ placeholder="Type here to translate!"
+ onChangeText={text => setText(text)}
+ defaultValue={text}
+ />
+ <Text style={{padding: 10, fontSize: 42}}>
+ {text.split(' ').map((word) => word && '🍕').join(' ')}
+ </Text>
+ </View>
+ );
}