Issues with Modals React Native
12:42 09 Feb 2022

everyone. I'm new in this new tecnology and I'm having a little problem with modals.

I'm programming a modal that only shows when a condition is true, in the first click it's all ok, but in the second the modal won't show, then when I click again, the window appears again, and continue successively.

The code works as follow: I have 3 states, each represent a different text to show in the modal. Then, I have a modal, that recieves a message (to print) and the state to identifies what state i need to show. And finally, in the main, I have a condition who calls the modal and show it ONLY if the state is true.

I checked the states with console.log and the only issue i find is that in some cases, the state is set in true, when is false, but i don't know why!

Thanks for read!

Here i detach part of the code.

Declare of the states in the main

const [modalVisibleEnTermino, setModalVisibleEnTermino] = useState(false)

const [modalVisibleFueraTermino, setModalVisibleFueraTermino] = useState(false)

const [modalVisibleRefuerzoTermino, setModalVisibleRefuezoTermino] = useState(false)

Condtition in main to show the apropiate state of modal

const setModal = () => {
    vacunas ===2 && (days>6 && days<150) ? setModalVisibleEnTermino(true) : setModalVisibleFueraTermino(true)
    if(vacunas == 3)
        setModalVisibleRefuezoTermino(true)
} 

Function to reset the states after showing modal (IDK if its ok)

 const restoreModals = () => {
    if (modalVisibleEnTermino) setModalVisibleEnTermino(false)
    if (modalVisibleFueraTermino) setModalVisibleFueraTermino(false)
    if (modalVisibleRefuerzoTermino) setModalVisibleRefuezoTermino(false)
}

After set the modal, I checked what state it's true, and I passed the values in this condition

{modalVisibleEnTermino && 
                }

                {modalVisibleFueraTermino && 
                }

                {modalVisibleRefuerzoTermino && 
                }

Modal

export const MyModal = (props) => {

const [visibleModal, setVisibleModal] = useState(props.state)
return (
  
      
        ¡IMPORTANTE!
        {props.message}
         setVisibleModal(false)}>
          Aceptar
        
      
  
);
reactjs state native