CODEWITHSUNDEEP
javascriptreactjsreact-native
user8485597
user8485597

Reputation: 63

react Don't make functions within a loop no-loop-func

my code works good, but there is this warning that i want to eliminate "Don't make functions within a loop no-loop-func reactjs"

this is my code 

renderOptions(categoryOptions) {
const renderData = []
let iterator = 0
// const subCategory = this.state.listSubcategorySelected
const { listSubcategory: subCategory = [], listCategory = [] } = this.props.showFilterRightText

for (const category in categoryOptions) {
  const liData = []

  renderData.push(
    <ul key={`ul.${iterator}`} className="filter-box__collection has-title">
      <li
        key={`lii.${iterator}`}
        className="filter-box__collection__title"
        value={iterator}
        onClick={this.showListOption(iterator)}
      >
        <span>{category}</span>
        <i className="material-icons right-align font-size__18px">
          {this.state.listOption[iterator] ? 'add' : 'remove'}
        </i>
      </li>
    </ul>
  )
  const indexCategory = listCategory.indexOf(category)
  categoryOptions[category].forEach((item, index) => {
    let isCkecked = false
    if (indexCategory >= 0) {
      isCkecked = subCategory[indexCategory] && subCategory[indexCategory].indexOf(item) !== -1
    }

    liData.push(
      <li key={`li${iterator}${index}`} className="filter-box__collection__item">
        <input
          id={item}
          type="checkbox"
          className="filled-in radio__is-for-filter"
          checked={isCkecked !== undefined ? isCkecked : false}
          onChange={this.handleChangeChk(category, item)}
        />
        <label htmlFor={item}>{item}</label>
      </li>
    )
  })
  renderData.push(
    <ul
      key={`ull${iterator}`}
      className="filter-box__collection"
      style={{ display: this.state.listOption[iterator] ? 'none' : 'block' }}
    >
      {liData}
    </ul>
  )

  iterator += 1
}

return renderData

}

the console tells me that the problem is in the line 24 (of the code i posted

const indexCategory = listCategory.indexOf(category)
      categoryOptions[category].forEach((item, index) => {

any hint that could helpme would be much apreciate

Upvotes: 0

Views: 738

Answers (1)

Jonas Wilms
Jonas Wilms

Reputation: 138407

The loop is the for..of loop and the function react is complaining about is the one passed to forEach, the (item, index) => arrow function. That is maybe a bit slower than a regular for loop as the JS engine has to create a new function context at each outer iteration, but it will only be a bit slower so you can safely ignore the warning. Or you use a regular for loop:

  for(const [item, index] of categoryOptions[category].entries()) {
   //...
 }

Upvotes: 2

Related Questions