eslint react with airbnb

Question

eslinting with airbnb

import React from 'react';
import TopBar from './topBar';
import Content from './content';

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <TopBar />
        <Content />
      </div>
    );
  }
}

export default App;

gives the error

5:1  error  Component should be written as a pure function  react/prefer-stateless-function

I have tried

function render(){}

and

render: function() {}

but didn't succeed

Answer 1

Using the docs from https://facebook.github.io/react/docs/reusable-components.html#stateless-functions, your code sample would be converted to:

import React from 'react';
import TopBar from './topBar';
import Content from './content';

function App (props) {
  return (
    <div className="app">
      <TopBar />
      <Content />
    </div>
  );
}

export default App;

Note that this updated code sample will break some other airbnb eslinting rules but those should be self-explanatory. Just posting this as a template to follow. The docs on this subject are very direct so make sure you give those a good review.