Onclick function only works when I Click twice

Question

I have this Little list that should show different modals based on what the user select , and the problem is When I select the first time it doesn't work and I have to click on it again to work .

Here is my code :

const Mylist = props => {
    const [open2, setOpen2] = React.useState(false);
  const [open3, setOpen3] = React.useState(false);

const handleClose2 = () => {
    setOpen2(false);
  };
    
  const handleOpen2 = () => {
    setOpen2(true);
  };
  const handleClose3 = () => {
    setOpen3(false);
  };
    
  const handleOpen3 = () => {
    setOpen3(true);
  };
    const [isActive , SetIsActive] = useState(false);
    const option =["Paid" , "UnPaid"]
    return (
        <div>
            <i class="fas fa-ellipsis-v" onClick={(e) => SetIsActive(!isActive)}></i>
            {isActive && (
                <div>
                    {option.map((option) => (
                        <div
                        onClick={(e) => {
                            SetIsActive(false);
                            {option == 'Paid' && setOpen2(true)}
                            {option == 'UnPaid' && setOpen3(true)}
                        }}
                        >
                            {option}
                            </div>
                    
                    ))}

 <Modal onClose={handleClose2} open={open2} >
                            <div>
Content
</div>
</Modal>

 <Modal onClose={handleClose3} open={open3} >
                            <div>
Content
</div>
</Modal>

Answer 1

Your code block is a bit messy with some brackets and closing tags missing (possibly some of the code was not copied in by mistake?).

In any case, I did my best at trying to fill in the missing parts and did some refactoring to your code. I hope that fixes your bug!

import React, { useState } from 'react';

const MyList = (props) => {
    const [isOpen1, setIsOpen1] = useState(false);
    const [isOpen2, setIsOpen2] = useState(false);
    const [isActive, setIsActive] = useState(false);

    const openOption = (option) => {
        setIsActive(false);
        if (option === "Paid") {
            setIsOpen1(true);
        }
        if (option === "UnPaid") {
            setIsOpen2(true);
        }
    };
    
    const options =["Paid", "UnPaid"]

    return (
        <div>
            <i class="fas fa-ellipsis-v" onClick={() => setIsActive(!isActive)}></i>
            {isActive && (
                <div>
                    {options.map((option) => (
                        <div onClick={() => openOption(option)}>
                            {option}
                        </div>
                    ))}
                </div>
            )}
            <Modal onClose={() => setIsOpen1(false)} open={isOpen1} >
                <div>
                    Content
                </div>
            </Modal>

            <Modal onClose={() => setIsOpen2(false)} open={isOpen2} >
                <div>
                    Content
                </div>
            </Modal>
        </div>
    );
};