javascript - onClick only works if pressed twice

Question

I have a modal with buttons inside, when these buttons are selected it is expected that it will sort the contact list according to what I want. (latest, oldest, readed, unread). But the list only changes when I click the button twice.

This is my modal component

export const Options = ['Mais recente', 'Mais antigos', 'Lidos', 'Nao lidos']; //array with options

const ModalOrder = ({modalIsOpen, setModalIsOpen, orderContacts, isOrder, setIsOrder}) => { //modal component

  return (
    <>  
    <Overlay display={modalIsOpen ? "flex" : "none"} onClick={() => setModalIsOpen(s => !s)} >
    </Overlay>
      <Wrapper height={modalIsOpen} shadow="0px -4px 4px rgba(0, 0, 0, 0.1);" display={"flex"} margin="10px 0 0 0" align="center" justify="center" zIndex="2011">
        {/* <Row transform={modalIsOpen ? "translateY(0)" : "translateY(327px)"} cursor="pointer" onClick={() => setModalIsOpen(s => !s)} custom="bottom: 0; position: absolute; margin-bottom: 320px; transition: all ease 0.3s;" width="90px" height="6px" background="#FFF9F9" radius="100px" shadow="0px 4px 4px rgba(0, 0, 0, 0.1);"></Row> */}
        <Icon custom="bottom: 0; position: absolute; margin-bottom: 310px; transition: all ease 0.3s;" transform={modalIsOpen ? "translateY(0)" : "translateY(360px)!important"} onClick={() => setModalIsOpen(s => !s)}/>
        <Column transform={modalIsOpen ? "translateY(0)" : "translateY(309px)"} align="center"  custom="bottom: 0; position: absolute; border-top-left-radius: 35px; border-top-right-radius: 35px; transition: all ease 0.3s;" width="100%" height="308px" background="#FFF" position="absolute">
          <Text margin="16px 0 12px 0" font="bold 16px/21px Segoe UI Regular" color="#448757" >Ordenar</Text>
          
          { 
            Options.map(content => {

              const handleOrder = () => {
                setIsOrder(content)
              
                orderContacts()
              }
              
              //executa o mais recente como ja selecionado
              useEffect(() => {
                setIsOrder("Mais recente")
                
              }, [])

              return <ButtonOpt 
                // orderContacts={orderContacts} 
                key={content} 
                txt={content} 
                isSelected={isOrder === content} 
                // setIsSelected={() => setIsOrder(content)} 
                onClick={handleOrder}
                borderT={content === "Mais recente" ? "1px solid rgb(196, 196, 196, 0.8)" : "none"} 
              />
            })
          }
          
        </Column>
      </Wrapper>
    </>
  );
};

const ButtonOpt = ({borderT, isSelected, txt, onClick}) => { //Modal button component

  return (
    <Button borderT={borderT || "1px solid rgb(196, 196, 196, 0.8)"} borderB={"1px solid rgb(196, 196, 196, 0.8)"} onClick={onClick} height="32px" width="100%" align="center" justify="start"> 
      <Row shadow="2px 0px 4px rgba(0, 0, 0, 0.1);" display={isSelected ? "flex" : "none"}  custom="border-bottom-right-radius: 5px; border-top-right-radius: 5px; position: absolute; left: 0;" width="10px" height="32px" background="#448757" /> 
      <Text margin="0 0 0 20px" font="normal 14px/19px Segoe UI Regular" color="#525252" >{txt}</Text> 
    </Button>
  )
}

export default ModalOrder;

I use a useState to store the state of each button when clicked (that isOrder).

That is my verification code:

contactsArr.sort(function (a, b) {
            //a.lastMessage.readBy
            if( isOrder === "Mais recente" || isOrder === null){
                console.log(contactsArr.sort, "array sort - case latest")
                return (a.lastMessage.sentAt > b.lastMessage.sentAt) ? -1 : ((a.lastMessage.sentAt < b.lastMessage.sentAt) ? 1 : 0);
            }
            if( isOrder === "Mais antigos"){
                console.log(contactsArr.sort, "array sort - case oldest")
                return (b.lastMessage.sentAt > a.lastMessage.sentAt) ? -1 : ((b.lastMessage.sentAt < a.lastMessage.sentAt) ? 1 : 0);
            }
            if( isOrder === "Lidos"){
                console.log(contactsArr.sort, "array sort - case readed")
                return (a.lastMessage.readBy > b.lastMessage.readBy) ? -1 : ((a.lastMessage.readBy < b.lastMessage.readBy) ? 1 : 0);
            }
            if( isOrder === "Nao lidos"){
                console.log(contactsArr.sort, "array sort - case unread")
                return (b.lastMessage.readBy > a.lastMessage.readBy) ? -1 : ((b.lastMessage.readBy < a.lastMessage.readBy) ? 1 : 0);
            }

Work well, but only if i click twice.

So i console log the ifs, so i can see whats happens, and i console log the handle to see if it is running.

So, when the aplication start that console.log appears:

? sort() { [native code] } "array sort - case latest"

Because i create a useEffect for the application to start with the latest selected.

So i open the modal:

And click in the second option (oldest). And this console.log appears:

? sort() { [native code] } "array sort - case latest"

And when i click again this appears:

? sort() { [native code] } "array sort - case oldest"

And the listing works normally. One thing I noticed is that if I click the oldest first and then the latest, the list will sort with the oldest. it is as if it saved the first click and showed the current one, but only executed it in the second.

question from:https://stackoverflow.com/questions/65938901/onclick-only-works-if-pressed-twice

Answer 1

Waitting for answers