Reactのコードをより綺麗に書くためには

Question

前提・実現したいこと

Reactのリファクタリングに関して教えていただきたいです。
下記のように記述することが出来たのですが、よりスマートな記述法を教えていただけると幸いです。

該当のソースコード

const SomethingComponent = () => {
  const changeElementColorToRed = (event) => {
    event.target.style.background = 'red'
  }
  const changeElementColorToBlue = (event) => {
    event.target.style.background = 'blue'
  }
  const changeElementColorToGreen = (event) => {
    event.target.style.background = 'green'
  }
  return(
    <div id='target-red' onClick={changeElementColorToRed}/>
    <div id='target-blue' onClick={changeElementColorToBlue}/>
    <div id='target-green' onClick={changeElementColorToGreen}/>
  )
}

もっとうまく設計して書くことを目指しています。
その他、気付き等あったら教えていただきたいです。

Comments

[hoshi-takanori]

綺麗以前に、DOM の値を直接書き換えるのは React 的にはあまり良くないと思います…。