<commit_before>import {connect} from 'react-redux'
import {createElement, PropTypes} from 'react'
import CSSModules from 'react-css-modules'

import BookmarkTree from './BookmarkTree'
import Search from './Search'

import styles from '../../../css/popup/panel.css'

const Panel = (props) => {
  const {trees} = props

  const mainPanelItems = []
  const subPanelItems = []

  for (const [treeIndex] of trees.entries()) {
    const targetPanelItems = treeIndex % 2 === 0 ? mainPanelItems : subPanelItems

    targetPanelItems.push(
      <BookmarkTree
        key={String(treeIndex)}
        treeIndex={treeIndex}
      />
    )
  }

  mainPanelItems.unshift(
    <Search key='search' />
  )

  return (
    <main styleName='main'>
      <section styleName='master' className='panel-width'>
        {mainPanelItems}
      </section>
      <section styleName='slave' className='panel-width' hidden={!subPanelItems.length}>
        {subPanelItems}
      </section>
    </main>
  )
}

Panel.propTypes = {
  trees: PropTypes.arrayOf(PropTypes.object).isRequired
}

const mapStateToProps = (state) => ({
  trees: state.trees
})

export default connect(mapStateToProps)(
  CSSModules(Panel, styles)
)
<commit_msg>Use treeInfo.id as key instead of treeIndex<commit_after>import {connect} from 'react-redux'
import {createElement, PropTypes} from 'react'
import CSSModules from 'react-css-modules'

import BookmarkTree from './BookmarkTree'
import Search from './Search'

import styles from '../../../css/popup/panel.css'

const Panel = (props) => {
  const {trees} = props

  const mainPanelItems = []
  const subPanelItems = []

  for (const [treeIndex, treeInfo] of trees.entries()) {
    const targetPanelItems = treeIndex % 2 === 0 ? mainPanelItems : subPanelItems

    targetPanelItems.push(
      <BookmarkTree
        key={treeInfo.id}
        treeIndex={treeIndex}
      />
    )
  }

  mainPanelItems.unshift(
    <Search key='search' />
  )

  return (
    <main styleName='main'>
      <section styleName='master' className='panel-width'>
        {mainPanelItems}
      </section>
      <section styleName='slave' className='panel-width' hidden={!subPanelItems.length}>
        {subPanelItems}
      </section>
    </main>
  )
}

Panel.propTypes = {
  trees: PropTypes.arrayOf(PropTypes.object).isRequired
}

const mapStateToProps = (state) => ({
  trees: state.trees
})

export default connect(mapStateToProps)(
  CSSModules(Panel, styles)
)

{'fraction_non_alphanumeric': 0.13532297628781684, 'fraction_numerical': 0.001635322976287817, 'mean_word_length': 3.3853046594982077, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4111331', 'n_tokens_mistral': 760, 'n_tokens_neox': 751, 'n_words': 171}