Hands-On Design Patterns with React Native

Naive stateful component fetching

Now, let's fetch some data and make our markup fully usable. First, we will follow the approach for beginners in React: using fetch in one of the stateful components. In our case, it will be App.js:

// src / Chapter 6 / Example 2 / src / App.jsclass TasksFetchWrapper extends React.Component {    constructor(props) {        super(props);        // Default state of the component        this.state = {            isLoading: true,            hasError: false,            errorMsg: '',            tasks: props.tasks        };    }    componentDidMount() {        // Start fetch and on completion set state to either data or        // error        return fetch('http://localhost2:3000/tasks')            .then(response => response.json())            .then((responseJSON) => {                this.setState({                    isLoading: false,                    tasks: Immutable.List(responseJSON) ...