[React]親要素のイベントが子要素への影響を防ぐ方法(onClickなど)

例えばこのようなReactコンポーネントがあるとする。

   <>
      <div
        style={{ background: 'black', height: '200px', width: '200px' }}
        onClick={() => console.log('parent')}
      >
        <div
          style={{ background: 'red', height: '50px', width: '50px' }}
          onClick={() => console.log('child')}
        ></div>
      </div>
    </>

このような表示になるはず

赤い部分をクリックするとconsoleでこのように表示される。つまり、先に子要素のonClickが実行して、次に親要素のonClick実行する

child
parent

もし赤い部分をクリックした場合、子要素のonClickだけを実行したい場合は、子要素のonClickのメソッドでstopPropagation()を使えば解決

<>
   <div
     style={{ background: 'black', height: '200px', width: '200px' }}
     onClick={() => console.log('parent')}
   >
     <div
       style={{ background: 'red', height: '50px', width: '50px' }}
       onClick={(e) => {
         e.stopPropagation();
         console.log('child');
       }}
     ></div>
   </div>
 </>

これでconsoleを見るとchildだけ出力されることが確認できる。つまり子要素のonClickだけ実行される！