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()

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()

• javascript
• reactjs
• ecmascript-6

• 1 this is useful only when you might have multiple ponents in one file (which one hardly does) and more than one of them use the function. Else this can be useful just in case you might want to export readLine. – Bharat Gupta Commented Mar 26, 2018 at 3:31

3 Answers 3

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/ponent'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()}
...
}

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

In React there are two main type of ponents: stateful and stateless. You use stateless ponents 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.

A function is same as a stateless ponent.
However it's less mon to write it this way, since the ponents 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>
    )
  }
}