0

I have a very simple React component and I noticed that my react hot reload doesn't work if I write my functions inside components like this

class Profile extends Component {
  renderSkills = () => skills.map(skill => (
    <div key={skill}>
      <Button>{skill} + 3</Button>
    </div>
  ))

  render() {
    return (
      <div>{this.renderSkills()}</div>
    )
   }
}

but it works fine if I write it like this

renderSkills() {
    return skills.map(skill => (
      <div key={skill}>
        <Button>{skill} + 3</Button>
      </div>
    }

So the hot reloading only doesn't work inside that function, if change something inside that function. If I change anything outside of it , it works normally.

In console I see that change was applied it just doesn't show up on the screen untill I reload the page.

What could be the problem?

Igor-Vuk
  • 3,551
  • 7
  • 30
  • 65

1 Answers1

0

I believe you need to include @babel/plugin-proposal-class-properties to support the following syntax.

renderSkills = () => skills.map(skill => (
    <div key={skill}>
      <Button>{skill} + 3</Button>
    </div>
  ))
Andrew Zheng
  • 2,612
  • 1
  • 20
  • 25
  • it's included. The syntax is working and code is working fine. Problem is with hot reloading when changing something inside that function. – Igor-Vuk Jul 18 '19 at 20:48
  • I spend some time googling the issue and I found this pull request for `react-proxy` which is used by `react-hot-loader`. It seems the hot-reload library does not support class method as arrow function at the moment. https://github.com/gaearon/react-proxy/pull/8#issuecomment-133668399 – Andrew Zheng Jul 18 '19 at 21:40