[React] JSX内で直接for文やif文を使う

したかったこと

renderメソッドで返すJSXの外側でfor文やif文や定義すると、return処理が増えたりして煩雑になってしまうので、JSXの中で直接for文やif文を呼び出したかった。

採用した作戦

即時関数を使う
参考にさせていただいたサイト - Qiita

コード

ScoutArticleSelector.jsx

render() {
    const articles = this.state.articles;
    return (
      {(() => {
          for(let i=0; i < articles.length; i++) {
            const label = articles[i].label;
            if (articles[i].value == this.props.target_article_id) {
              return(
                <div>
                  ...
                </div>
              )
            }
          }
      })()}
   )
}

まだ汚い感じがしますが…