Cambiando modales por navegación

umm, mi lado radical eliminó todo lo que tenía delineado amarillo, pero mi lado prudente hizo commit antes de eso.

¡Hola, comunidad! 👋

👀 Yo cree un div que encierre o agrupe el formulario para poder centrarlo, ya que si lo hacemos de la forma normal con el margin auto, en responsive se rompe un poco la ui

const NewPage = () => {
  return (
    <div className='new-todo-container'>
      <TodoForm
        title="Write your new TODO"
        submitText="Add"
        submitEvent={() => console.log('llamar a add todo')}
      />
    </div>
  )
}

Y el css

.new-todo-container{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Espero les sirva.

Saludos.

Yo el botón de CreateTodo lo cambiaría por un componente Link.
Esto dice la documentación 👇:

Además, un componente Link es una etiqueta <a href=""> por detrás, lo cual es necesario para tener un buen SEO.
.
Es el equivalente a usar un <button> en vez de un <a> para cambiar de URLs en HTML puro.

Una alternativa a la funcionalidad creada en la clase para los textos dinamicos, es usar el hook de React Router DOM ‘useLocation’ que devuelve la ruta actualmente usada y con esto hacer la validación necesaria.

Creo que así, nos evitamos el tener que mandar props adicionales.

const location = useLocation();

<label>{(location.pathname === '/new') ? 'Escribe tu TODO' : 'Edita tu TODO'}</label>

sería bueno haber dejado el modal como para no perder la funcionalidad de los portales y hacer el edit en una nueva ventana