1

I have a Modal component that receives a data set of image sources and the initial index. Each side of the Modal has navigation arrows that either increment or decrement the current index. This is a simplified version of the Modal component:

function Modal({ index, data, onClose, show }) {
  const [currIndex, setCurrIndex] = useState(index);
  return (
    <main className={show ? "Modal Open" : "Modal"}>
      <img src={data[currIndex].link} alt="ModalImage" />
      <IconContext.Provider value={{ className: "Arrows" }} >
        {currIndex < data.length - 1 && (<AiOutlineRight className="ArrowNext" onClick={() => setCurrIndex(currIndex + 1)} />)}
        {currIndex > 0 && (<AiOutlineLeft className="ArrowLast" onClick={setCurrIndex(currIndex - 1)} />)}
            </IconContext.Provider>
      <div className="ModalBackground" onClick={onClose} />
    </main>
}
export default Modal;

I am using it like so:

<Modal show={show} onClose={() => setShow(false)} data={filterData()} index={modalIndex} ></Modal>

This must be bad practice because it is not working. The state is initially always 0 and never updates when I increment or decrement it. It gets immediately reset to 0. The state is stuck at 0. The props value is being passed correctly and everything else just won't work as the initial state. Is there another way I can set the initial state in the Modal based on the selection in another component?

Kostas Minaidis
  • 4,681
  • 3
  • 17
  • 25
Sean Cesario
  • 33
  • 3

1 Answers1

1

Inside the onClick for the AiOutlineLeft and AiOutlineRight, instead of:

onClick={setCurrIndex(prevIndex => prevIndex + 1)} // -1 for the other one

it should be:

onClick={() => setCurrIndex(prevIndex => prevIndex + 1)} // -1 for the other one

In the first case, the setCurrIndex will be executed immediately when the Component gets mounted, because it is a function call: fn().

In the second case, the arrow function will be executed only upon click, because it is a function declaration: ()=> fn(), waiting to be executed after a click event.

Word of caution: be very careful when using props an the initial value for the state. Read the following resources to learn about the cases where this might be considered an anti-pattern and should be avoided:

Kostas Minaidis
  • 4,681
  • 3
  • 17
  • 25
Ammar Ahmed
  • 344
  • 3
  • 11
  • Thank you so much for the helpful answer! I would like to use a better practice method. I was looking at the documentation and their examples are all class based components. I’m having trouble translating it to my functional components. Could you give further advice on that for my specific example. Thanks a lot! – Sean Cesario Jul 02 '22 at 12:57
  • Read through the first article linked in the answer, and you should be able to figure out what is the better practice for your use case. – Ammar Ahmed Jul 05 '22 at 01:46