function or variable outside of a class in react

Question

I was exploring react, and I saw this piece of code.

const renderLine = (user, key) => <li key={key}><b>{key}</b>: {user[key]}</li>

export default class App extends Component {
  ...
  ...
  render () {
    return (
      <div className='App'>
          {Object.keys(user).map(key => renderLine(user, key))}
      </div>
    )
  }
}

Why the renderLine is outside of the App class? What's the intention of this pattern? Usually I will just put inside a class and use it like this.renderLine()

Answer 1

You can put it in the class, for sure, without any problem. Exposing it outside the class makes it a helper function that can be used outside the class/component's scope.

You can even organise these kind of code into a helper function outside this js file, e.g. UIHelper.js:

//UIHelper.js
const renderLine = (user, key) => <li key={key}><b>{key}</b>: {user[key]}

const UIHelper = {
    renderLabel: renderLabel,        //Other helper functions
    renderLine: renderLine,          //<----------Export this
    renderDateTime: renderDateTime,  //Other helper functions
    ...
}
export default UIHelper;

Usage:

//Other.js
import UIHelper from '../what/ever/path/UIHelper'

render (){
...
   {UIHelper.renderLine()}
...
}

Answer 2

Reusable is the answer. Putting it in your class and you can't use it in another component.

In React there are two main type of components: stateful and stateless. You use stateless components to render small things that don't own its data. renderLine is the perfect example: it just render whatever you give it, in a line.

Answer 3

A function is same as a stateless component.
However it's less common to write it this way, since the components inside mapping function require key, but not every row need to display the key value.

const renderLine = (user, key) => (<li key={key}><b>{key}</b>:{user}</li>);

const RenderStatelessLine = props => (<li>{props.user}</li>);

export default class App extends Component {
  render () {
    return (
      <div className='App'>
          {Object.keys(users).map(key => renderLine(users[key], key))}
          {Object.keys(users).map(key => <RenderStatelessLine user={users[key]} key={key} />)}
      </div>
    )
  }
}