CODEWITHSUNDEEP
reactjs
Izio
Izio

Reputation: 398

How to define variable in class component

I have 2 basic components here and I get an error when trying to map over my elements:

class EleMenu extends Component {
  render(){
    return (
      <li className="eleMenu">{this.props.name}</li>
    )
  }
}

class MainMenu extends Component {
  const rows = []
  this.props.elements.forEach()    //error here
    (e) => {
      rows.push(
        <EleMenu
          name={e.name}
        > 
        <EleMenu/>
      )
    }
  );

  render(){
    return (
      <ul className="mainMenu">
        {rows}
      </ul>
    )
  }
}

It says unexpected token for the line: this.props.elements.forEach()

Upvotes: 0

Views: 6446

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Reason is, only methods are allowed inside es classes and you have defined const and running loop also.

This is in proposal stage check this.

Solution:

Either put all the code inside a function and call that function from render method like this:

class MainMenu extends Component {

  renderElement() {
    const rows = []
    this.props.elements.forEach(e => {
      rows.push(
        <EleMenu
          name={e.name}
        > 
        <EleMenu/>
      )}
    )
    return rows;
  }

  render(){
    return (
      <ul className="mainMenu">
        {this.renderElement()}
      </ul>
    )
  }
}

Or put all the code inside render method:

class MainMenu extends Component {

  render(){
    const rows = []
    this.props.elements.forEach(e => {
      rows.push(
        <EleMenu
          name={e.name}
        > 
        <EleMenu/>
      )}
    )

    return (
      <ul className="mainMenu">
        {rows}
      </ul>
    )
  }
}

Suggestion:

Better to use array.map, instead of using forEach and then pushing the elements inside an array.

Like this:

class MainMenu extends Component {
  render() {
    return (
      <ul className="mainMenu">
        {
          this.props.elements.map(e => (
            <EleMenu
              key={e.name}
              name={e.name}
            /> 
          ))
        }
      </ul>
    )
  }
}

Upvotes: 4

Related Questions