Reto: estados para abrir y cerrar un modal

Solo agregue una **función, para negar el estado actual y asignarlo al botón de agregar en el OnClick **

 const abrirModal = () => {
        setOpenModal(!openModal);
      }

y utilice el ** context global ** para el estado.

const {openModal, setOpenModal} = React.useContext(TodoContext);<code> 

Código completo:

import { TodoContext } from '../TodoContext';
import React from 'react';
import './CreateTodoButton.css';

function CreateTodoButton(){
    const {openModal, setOpenModal} = React.useContext(TodoContext);
    
    const abrirModal = () => {
        setOpenModal(!openModal);
      }


    return (        
        <div className=''>
            <div className='d-flex flex-row justify-content-center'>
                <p>
                    <span className="inputColor">
                        <input type="text" placeholder="Ingresa alguna tarea..."/>
                        <span></span>	
                    </span>
                </p>        
            </div>
            <div className='d-flex flex-row justify-content-center'>
                <div className="box-2">
                    <div className="btn btn-two" onClick={abrirModal}>
                        <span>Agregar Tarea</span>
                    </div>
                </div>
            </div>
        </div>
    );
}

export {CreateTodoButton};

Les comparto como me quedo antes y despues de dar click al CreateTodoButton. Recibo sugerencias y recomendaciones, nunca antes habia creado un modal ni mucho menos agregarle overlay.
.
Antes de abrirlo:

.
Despues de abrirlo:

Pueden usar un useEffect para identificar la tecla de ESC y cerrar el modal con el teclado

<code> React.useEffect(() => {
        const close = (e) => {
          if(e.keyCode === 27){
            setOpenModal(false);
          }
        }
        window.addEventListener('keydown', close)
      return () => window.removeEventListener('keydown', close)
    },[]);

Yo dejé el open modal como setOpenModal(true) directamente, pues el botón create todo button nunca va a cerrarlo, para eso es el botón de cerrar del modal, entonces no lo vi necesario

Yo lo pense un poco diferente utilizando lo que ya vimos en clases anteriores.

En el archivo TodoContext/index.js cree un nuevo estado y una funcion para cambiar ese estado y la inclui en el return del Toco Context:

const [openModal, setOpenModal] = React.useState(false);

const toggleModal = () => {
	setOpenModal(!openModal)
}

    return (
        <TodoContext.Provider value={{
            loading,
            error,
            completedTodos,
            totalTodos,
            searchValue,
            setSearchValue,
            searchedTodos,
            completeTodo,
            delteTodo,
            openModal,
            setOpenModal,
            toggleModal
        }}>
            {children}
        </TodoContext.Provider>
    );

Dentro del archivo CreateButton/index.js hice lo siguiente:

import React from 'react';
import './CreateTodoButton.css';
import { TodoContext } from '../TodoContext';

function CreateTodoButton() {
    const {
        toggleModal
    } = React.useContext(TodoContext)

    return (
        <button 
            className='CreateTodoButton'
            onClick={(event) => {
                toggleModal()
            }}
        >+</button>
    );
}

export {CreateTodoButton};

Mi solución fue, envíar el estado del modal al CreateTodoButton

Y en el onClick del botón, solo hice que cambiará el estado dependiendo del valor que contenía

Mi solucion al Reto fue la siguiente:
Envio a la funcion el setOpenModal y en el onClick lo utilizo para negar el openModal, enviandolo como argumento y devolviendo su valor negado.

function CreateToDoButton({setOpenModal}){
    return(
        <button className="bg-gray-700 text-white rounded-lg p-2 mt-10"
            onClick={
            () => {
                setOpenModal(openModal => !openModal)
            }} 
        >Add a New ToDo</button>
    )
}
export default CreateToDoButton;

Esta fue mi solucion para el reto del button !!

    return (
        <button onClick={(event) => {
            openModal ? 
            setOpenModal(false) :
            setOpenModal(true) 

            console.log('escuchando')
        }}>
            +
        </button>
    );