Render function in reactjs

Question

Quick question. I\'m learning react js.

When we create a component, we provide in the render function the html template of the component to render. So far I have o

Answer 1

You can split your render function to the bunch of good-named methods like a partials in old plain html-templates. It's useful to make complex react-components, because you will remove big unreadable html-part from your code.

For example, here is some pseudo-code described this approach:

class NavBar extends React.Component {

  // Render user name and links on profile and logout 
  renderUser() {
    if (!user) return;
    return 
{user.name}
;
  }

  // Render list with nav-bar items if they exists
  renderNavBarItems() {
    if (!user) return;
    return 
{this.items.map((i) 
{i.name}
)}
;
  }

  render() {
    return (

      {this.renderNavBarItems()}
      {this.renderUser()}
    
);
  }
}