The last piece of this application is rendering each todo item and providing the ability to change the status of the todo in the Todo component. Let's take a look at this code:
import React, { Component } from 'react';
import { Text, View, Switch } from 'react-native';
import { Mutation } from '@apollo/react-components';
import styles from './styles';
import { CHANGE_TODO_STATUS, GET_USER } from '../constants';
const completeStyleMap = new Map([
[true, { textDecorationLine: 'line-through' }],
[false, {}],
]);
class Todo extends Component {
render() {
const {
todo: { id, text, complete },
} = this.props;
return (
<Mutation
mutation={CHANGE_TODO_STATUS}
refetchQueries={[
{
query: GET_USER,
variables: {
userId: 'me'
}
}
]}
>
{changeTodoStatus => (
<View...