Here's the code I copied from React's Native website that should render a text input with some formatting features:
import React, { Component } from 'react';
import { AppRegistry, 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})}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);
I'm using create-react-native-app.
If I run
npm run flow
It displays lots of errors:
My question is - am I doing something wrong here, or the code from React's website is already outdated?
App.js:7
7: constructor(props) {
^^^^^ parameter `props`. Missing annotation
App.js:9
9: this.state = {text: ''};
^^^^^^^^^^ object literal. This type is incompatible with
6: export default class PizzaTranslator extends Component {
^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
App.js:18
18: onChangeText={(text) => this.setState({text})}
^^^^^^^^^^^^^^^^^^^^^ call of method `setState`
18: onChangeText={(text) => this.setState({text})}
^^^^^^ property `text` of object literal. Property cannot be assigned on possibly undefined value
6: export default class PizzaTranslator extends Component {
^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
App.js:21
21: {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
^^^^ property `text`. Property cannot be accessed on possibly undefined value
21: {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
^^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?
Found 4 errors
import React, { Component } from 'react';
import { AppRegistry, 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})}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);
It seems that super(props)
is incorrect in this context. So I changed the
export default class PizzaTranslator extends Component
to
class PizzaTranslator extends Component
then called it from export default class Main
and it's working.