How do I define methods in stateless components?

Question

If I simply have:

const App = function() {
    return (
        
{this.renderList()}
    )

}

How do I define the

Answer 1

You would want to do something like this

const App = function() {

    return (
        <div>{renderList()}</div>
    )

}
  function renderList(){
      return "this variables"
     }

Naturally this is a bad approach you its recommended that you pass in functions as props and stateless component are always dumb componets. Say if you are using redux for example you can have your component render like this

import {connect} from 'react-redux';
const App = (props) => {
   return (
      <div> {props.renderList} </div>
    )
}
function renderList (){
   return "your render logic"
}
export default connect(null, {renderList})(App)

Answer 2

Can you try something like

const App = () => {
  return (
    <div>{this.renderList()}</div>
  )
}

App.renderList = () => {
    return 'This is my list'
}

Answer 3

I am hesitant to give a solution to this because inline Stateless Functions are not supposed to have methods. if you want a method you should use a Class and theres nothing wrong with using a class. Its all based on what you need to do. Stateless Functions are designed to be a super light weight way to render something that doesn't need methods, or a state or even a this context (in terms of a class).

you should be doing it like this.

class App extends Component {
    constructor(){
        super();
        // note this is a Stateless Component because its a react class without a state defined.
    }
    renderList = () => {
        return <span>Something Here</span>;
    }
    render() {
        return <div>{this.renderList()}</div>
    }
}

a HACK way that I wouldn't recommend (but does solve your question in the way you want it to) would be like this.

const App = () => {
    let renderList = () => {
        return <span>Something Here</span>
    }
    return <div>{renderList()}</div>
}

The reason why its generally a bad practice is because you are creating a function and all the memory allocation needed every render cycle. Subsequently, the internal diffing optimizations that react provides is generally useless if you do this because a new function gives a different signature than the prior render cycle. If this had a lot of children, they would all be forced to re-render!

Edit - React Version 16.8.0 +

You can use Hooks to do this. I would recommend using memo to memoize the function, this way you aren't creating it in memory each render cycle.

const RenderList = React.memo(props => (
  <span>Something Here</span>
))

Answer 4

const App = function() {
  const renderList = ()=> {
      return "this variables"
     }

    return (
        <div>{renderList()}</div>
    )

}

Answer 5

You can create render list function as standalone and use function parameter to pass props into function.