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:

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};

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)
    },[]);

Así se ve mi modal.
Y me parece genial idea la función

onClick={() => setOpenModal(state => !state)}

Lo que yo hice fue usar el contexto en el TodoButton, no sé si será la mejor opción pero me funciona para abrir y cerrarlo

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

function CreateTodoButton() {
    const {openModal, 
        setOpenModal,
       } = React.useContext(TodoContext)
    return(
        
        <button onClick={()=>{
            !openModal?
            setOpenModal(true):
            setOpenModal(false)
            
        }}>+</button>
    )
}

export {CreateTodoButton}

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

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>
    );

No necesito un modal, ya que ya le había hecho una función createTodo

//Función
    const { item: todos,
        loadingStatus: todoStatus,
        saveItem: saveTodos
    } = useLocalStorage({ itemName: "TODOS-HACERES-V1", initialValue: [] });

    const createTodo = (text) => {
        if (text) {
            const timestamp = new Date().getTime();
            const newTodo = { id: timestamp, text, completed: false };
            saveTodos([...todos, newTodo]);
        }
    };

//Componente
function CreateTodobutton({
    inputCreateValue,
    setInputCreateValue,
    createTodo,
    totalTodos,
    todoStatus }) {

    function CreateButton() {
        createTodo(inputCreateValue)
        setInputCreateValue("");
    }
    if (todoStatus === "Ready") 
    return (
        <li className="CreateTodoButton">
            <input
                value={inputCreateValue}
                placeholder={totalTodos === 0 ? "Escribe una nueva tarea aqui" : ""}
                onChange={(event) => {
                    setInputCreateValue(event.target.value);
                }}
            />
            <BsPlus className="IconCreateTodo" onClick={CreateButton} />
        </li>
    );
}