How it works...

The first thing we did in our component was set our state. The task state is for the input to create new items, and the list state is to save all the tasks items:

    state = {      task: '',      list: []    };

The TextInput component creates an input element, the main difference from the input in React is that instead of using the onChange method, it is using onChangeText and by default gets the value, and we can update our state directly:

  <TextInput    style={styles.inputText}    placeholder="Add a new task"    onChangeText={(value) => this.setState({ task: value })}    value={this.state.task}  />

The TouchableOpacity component is to handle click events (onPress in React Native) and can be used as a button. Maybe you're wondering why I didn't use ...

Get React Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.