Handle our layout with Ionic grid

import { useState, useEffect } from 'react';
import { IonPage, IonTitle, IonContent, IonToolbar, IonGrid, IonRow, IonCol, IonItem, IonText, IonButton } from '@ionic/react';

const Todo = () => {

  const [todoItems, updateTodoItems] = useState([{ title: 'Get groceries'}, {title: 'Fill up on gas' }]);

  function deleteTodo(index) {
    const todoItemsClone = Object.create(todoItems, []);
    todoItemsClone.splice(index,1);
    console.log(todoItems);
    updateTodoItems(todoItemsClone);
  }
  
  return (
    <IonPage>
      <IonToolbar>
         <IonTitle>Todo App</IonTitle>
       </IonToolbar>
      <IonContent>
        <IonGrid>
          {todoItems.map((todoItem, index) => (
            <IonRow>
              <IonCol size="12">
                <IonItem>
                  <IonGrid>
                    <IonRow>
                      <IonCol size-xs="8.5" size-sm="8.5" size-md="10" size-lg="11"  class="ion-align-self-center">
                        <IonText>{todoItem.title}</IonText>
                      </IonCol>
                      <IonCol size-xs="3.5" size-sm="3.5" size-md="2" size-lg="1" class="ion-text-right">
                        <IonButton onClick={() => deleteTodo(index)}>Delete</IonButton>
                    </IonCol>
                    </IonRow>
                  </IonGrid>
                </IonItem>
              </IonCol>
            </IonRow>
          ))}
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};

export default Todo;

index.jsx

./src/pages/TodoPage

./src/pages

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.unregister();

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


index.tsx

import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';

import TodoPage from './pages/TodoPage';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home">
          <TodoPage />
        </Route>
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;
