Javascript – React component rendered with createPortal with state controlled by parents will not rerender on state change

We need to create a separate state to maintain the data of the modal, this can be used to separately maintain the modal data

Apart from this please ensure that the key is unique for all sets of labels and checkboxes, also for a group of checkboxes the name field should be the same and unique when compared to other groups, this is the reason for your issues.

import React, {
  useState,
  Dispatch,
  SetStateAction,
  useEffect,
  useContext,
} from 'react';
import { ModalContext } from '../context/modalContext';
import Modal from './Modal';

interface Props {
  years: number[];
  selectedYearIdx: number;
  setSelectedYearIdx: Dispatch<SetStateAction<number>>;
}

const SelectYearModal = ({
  years,
  selectedYearIdx,
  setSelectedYearIdx,
}: Props) => {
  const { setData, data } = useContext(ModalContext);
  return (
    <Modal>
      <h4 className="H4 semibold py-8">Filter by year</h4>
      <div>
        {years.map((year, index) => {
          const yearkey = `${Math.random()}-${year}`;
          const namekey = `${Math.random()}-${year}`;
          return (
            <div key={yearkey}>
              <input
                key={yearkey}
                type="radio"
                id={yearkey}
                name={namekey}
                checked={index === data}
                onChange={() => {
                  setData(index);
                  setSelectedYearIdx(index);
                }}
                style={{ marginRight: '8px' }}
              />
              <label htmlFor={yearkey}>{year}</label>
            </div>
          );
        })}
      </div>
    </Modal>
  );
};

export default SelectYearModal;

stackblitz