Question: Im confused as to when a component should be used to render part of a page in react and when a function should be used. As per: [React Docs](https://reactjs.org/docs/jsx-in-depth.html) functions can be used within the render function which leads to one question:

When should functions like this be used:

```js
                        <> {this.renderAgreementForm(data)}</>
```

In this case the renderAgreementForm function is a class function that returns a large swath of the page's HTML and functionality.

Should this ever be used over a component? Even when said component will not be reused?

Answer: 
Ultimately, whether you define a new component for your data or generate more HTML in an existing component is a design decision you have to make on a case-by-case bases. But there are some guiding principles:

* [Single Responsibility Principle](https://en.wikipedia.org/wiki/Single_responsibility_principle) - Does the HTML and the code to create it belong to the core responsibility of the current component? If not, create a new one.
* [Principle of Least Astonishment](https://en.wikipedia.org/wiki/Principle_of_least_astonishment) - Would another person be surprised to find the code in the existing component? If yes, create a new one.
* [Open / Closed Principle](https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle) - Will your current components allow you to extend functionality in the future without changing existing code? If no, re-structure your components.

My personal rule of thumb would be: If the function renders "large swaths of HTML" or does something non-trivial, I'd probably create a new component. I would use the inline functions for something like (i.e. trivial code):

```
render() {
    return <ul>{ listOfFriends.map(this.createFriendItem) }</li>
}

createFriendItem(f) {
    return <li><FriendShortView friend={f} /></li>
}

```
In the return part of the render function.

```
import ListWrapper from "./ListWrapper";

// components should be used directly

showList() {
   return <li>item</li>;
}

// function or constants should be wrapped with `{}`

render() {
   const inputValue = "value";
    return (
       <ListWrapper>
           { this.showList() } // <li>item</li>
           { inputValue } // value
       </ListWrapper>
    );
}

```