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

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 2

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, eg 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 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> ) } }