値を変更した時にチェックボックスの状態も変えたい

Question

export default function Selector(props) {
  const changeValue = () => {
    props.onChange((current) => !current);
  }

  const onClickEvent = () => {
    if(props.isSelected = true){
      changeValue();
      setTimeout(changeValue,3000)
    }else{
      changeValue();
    }
  };

  return (
      <div className="Select">
        <Checkbox
          icon={<AudiotrackOutlinedIcon />}
          checkedIcon={<AudiotrackSharpIcon />}
          defaultChecked={props.isSelected}
          onChange={onClickEvent}
        />
        {props.isSelected && (
        <div className="Select_on">現在チェックされています</div>
        )}
        {!props.isSelected && (
        <div className="Select_off">現在チェックされていません</div>
        )}
      </div>
  )
}

上部のコードは、省略されていますが、チェックボックスにチェックが入っているときは「現在チェックされています」と表示され、チェックが入っていないときは「現在チェックされていません」と表示するようにしたものです。

onClickEventの中で、チェックを外して3秒後にチェックが自動で入るように書きました。

しかし、チェックを外して3秒たった時にprops.isSelectedの値は変わり、表示されるメッセージも「現在チェックされています」に変わるのですが、チェックボックスは空白のままで変わりません。

どのようにすればprops.isSelectedの内容とチェックボックスの状態を同じにすることができるのでしょうか。

ご回答よろしくお願いします。

Comments

[hoshi-takanori]

defaultChecked={props.isSelected} じゃなくて checked={props.isSelected} では。

[TTaro]

ご指摘いただいた通りdefaultCheckedからcheckedに変えると動いてほしいように動きました。ありがとうございました。

Answer 1

defaultCheckedからcheckedに変えると動いてほしい通りの動作になりました。
hoshi-takanoriさんありがとうございました。