this.state is undefined inside function - React JS [duplicate]

Answer 1

By using function you sort of lose the context and this is not the one you were expecting.

In this case, either use arrow function as:

render() {
  createMenuItems = (items) => {
    console.log(this.state.menuSelected)
    ...
  }
}

Or, and here comes my suggestion, move createMenuItems outside of render method:

createMenuItems = (items) => {
  console.log(this.state.menuSelected)
}

render() {
  return (
    

      

        {menumenuOptions.menuItems.map((menuItem, index) =>
          this.createMenuListItem(menuItem)
        )}
      
    
  )
}

Binding it in the constructor is also a possibility:

class YourComponent extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      menuSelected: '',
    }

    this.createMenuListItem = this.createMenuListItem.bind(this)
  }

  createMenuListItem() {
    console.log(this.state.menuSelected)
  }

  render() {
    return (
      

        

          {menumenuOptions.menuItems.map((menuItem, index) =>
            this.createMenuListItem(menuItem)
          )}
        
      
    )
  }
}