What is One Line JSX?

one-line-jsx.md

JSX can get messy fast.

I was recently introduced to writing smart and dumb components when using react. As an extension to keeping the presentation code strictly within dumb components, I try to write one line JSX.

Original JSX (NOT ONE LINE JSX):

class SomeListComponent {
  render() {
    let names = this.props.names.map(({first, last}) => {
      return <li>{first} {last}</li>
    })
    return (
      <ul>
        {names}
      </ul>
    )
  }
}

Better, One Line JSX:

class SomeListComponent {
  renderName({first, last}) {
    return <li>{first} {last}</li>
  }
  render() {
    return <ul>{this.props.names.map(renderName)}</ul>
  }
}

By keeping the JSX limited to one line, it not only keeps the code clean, but also helps modularize the code.

That's all folks.