React Hooks：更改多个项目的 state

Question

I have a list of icons. When I click on one of them, I want it to:

1/ change state to day or night

2/ change icon image to a sun or a moon.

But with the code that I've written, if I click on one, it changes all the icons image and only one state is linked to all.

How can I do so each icons has it own state and when i click on icon, only the icon clicked changes to a moon or a sun and not all of them?

My code:

export default function MyModal() {
  const [isVisible, setVisible] = useState(false);
  const [isDay, setDay] = useState(true);
  const { RangePicker } = DatePicker;
  const { Option } = Select;
  const style = {
    verticalAlign: "middle",
    marginRight: 10,
  };

  function handleDayNight() {
    isDay === true ? setDay(false) : setDay(true);
    console.log("isDay =", isDay);
  }
  function handleSelectChange(value) {
    console.log(`selected ${value}`);
  }

  function handleCheckChange(checkedValues) {
    console.log("checked =", checkedValues);
  }

  return (
    <div>
      <Button type="primary" onClick={() => setVisible(true)}>
        Add an exception
      </Button>
      <Modal
        title="Add an exception"
        style={{ top: 20 }}
        visible={isVisible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        <p>Exceptions name</p>
        <Input placeholder="80% Wednesday" />
        <p style={{ marginTop: 10 }}>Select date</p>
        <RangePicker onChange={([date]) => console.log(date)} />
        <p style={{ marginTop: 10 }}>Frequency</p>
        <Select
          defaultValue="Weekly"
          style={{ width: 120 }}
          onChange={handleSelectChange}
        >
          <Option value="daily">Daily</Option>
          <Option value="weekly">Weekly</Option>
          <Option value="monthly">Monthly</Option>
        </Select>
        <Divider />
        <Checkbox.Group style={{ width: "100%" }} onChange={handleCheckChange}>
          <div>
            {isDay === true ? (
              <Sun style={style} onClick={handleDayNight} />
            ) : (
              <Moon style={style} onClick={handleDayNight} />
            )}
            <Checkbox value="Monday">Monday</Checkbox>
            <br></br>
            {isDay === true ? (
              <Sun style={style} onClick={handleDayNight} />
            ) : (
              <Moon style={style} onClick={handleDayNight} />
            )}
            <Checkbox value="Tuesday">Tuesday</Checkbox>
            <br></br>
            {isDay === true ? (
              <Sun style={style} onClick={handleDayNight} />
            ) : (
              <Moon style={style} onClick={handleDayNight} />
            )}
            <Checkbox value="Wednesday">Wednesday</Checkbox>
            <br></br>
            {isDay === true ? (
              <Sun style={style} onClick={handleDayNight} />
            ) : (
              <Moon style={style} onClick={handleDayNight} />
            )}
            <Checkbox value="Thursday">Thursday</Checkbox>
            <br></br>
            <Checkbox value="Friday">Friday</Checkbox>
            <br></br>
            <Checkbox value="Saturday">Saturday</Checkbox>
            <br></br>
            <Checkbox value="Sunday">Dimanche</Checkbox>
          </div>
        </Checkbox.Group>
      </Modal>
    </div>
  );
}

Answer 1

Use a separate component for each of those, so you can have individual separate states inside those components. Eg, replace all of

{isDay === true ? (
    <Sun style={style} onClick={handleDayNight} />
) : (
    <Moon style={style} onClick={handleDayNight} />
)}

with

<SunMoon style={style} />

const SunMoon = ({ style }) => {
  const [isDay, setDay] = useState(true);
  const handleDayNight = () => setDay(!isDay);
  return isDay
    ? <Sun style={style} onClick={handleDayNight} />
    : <Moon style={style} onClick={handleDayNight} />;
};