34

If I simply have:

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

}

How do I define the renderList method?

I can't do const renderList = function() {} (nor with var or let). I can't do renderList() {}.

What's the right syntax?

8
  • what do you want renderList to do? Jun 9, 2016 at 4:59
  • 1
    @JohnRuddell Render a list.
    – Yeats
    Jun 9, 2016 at 5:13
  • I get that. I mean what kind of list? like whats rendering this component? what are the contents of renderList? Jun 9, 2016 at 5:14
  • 2
    @JohnRuddell dropping in from 2018, you are so patient to deal with this guy in the chat! May 16, 2018 at 13:28
  • 4
    Fun to come back to in 2019 as React has moved from stateless, pure functions not having state or methods etc to it almost being the preferred way to create components: 2016: "Dont put methods in your function, u idiot! They're supposed to be pure! Its v. simple. Classes for logic / state. Functions for pure, dumb rendering, no state, no lifecycles 2019: "Hey, use useState & useEffect to manage lifecycle & state & by all means create methods but u cant access them outside like a class, so think carefully re what actually needs to be in your component & what should live in utils
    – Aid19801
    May 24, 2019 at 8:20

5 Answers 5

43

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>
))
17
  • 3
    The docs literally call them stateless functions. from the docs.. says they are pure functions of their props and that they must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. theres no lifecycle methods. theres no backing instances aka this.someMethod its right there in the docs man Jun 9, 2016 at 7:26
  • 8
    its a function. its not a class. functions dont have methods classes do. its a basic javascript thing. in es5 it would be prototype methods but not the function Jun 9, 2016 at 7:29
  • 1
    This isn't a react thing buddy its a vanilla javascript thing. basic javascript. and again with the insults man. gotta cheer up :) Jun 9, 2016 at 7:35
  • 22
    @JohnRuddell I applaud your patience
    – ivarni
    Jun 9, 2016 at 7:38
  • 8
    Hey @ebr I am on the road so I may be brief but yes, the reason why it is a bad idea 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 you don't need state, then define that function as a standalone (not inside your component function) and pass props.. basically another functional component. That way the function is created once at runtime. Hope that helps! Jun 11, 2018 at 17:55
7
const App = function() {
  const renderList = ()=> {
      return "this variables"
     }

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

}
2
  • 16
    why do you hate arrow functions? Jun 9, 2016 at 5:22
  • This is working in my case. Please check whether you called like this.renderList(). In this case, you have to call renderList() like above (without this) Dec 2, 2017 at 21:47
2

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)
3
  • Sadly that doesn't work either. Same error as the rest of them. "has no method "renderList".
    – Yeats
    Jun 9, 2016 at 4:12
  • Check my edited answer. If that doesn't work. You need to paste your full code
    – Abiodun
    Jun 9, 2016 at 4:23
  • 1
    I don't see anything wrong with declaring methods outside. I agree it may be cumbersome since you have to pass required data (instead of const { myProp } = this.props). But at the same time, you make your methods into pure functions Jan 4, 2019 at 12:19
0

Can you try something like

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

App.renderList = () => {
    return 'This is my list'
}
1
  • 2
    this.constructor.renderList() is what you are looking for Jun 9, 2016 at 5:36
-1

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

1
  • Could you please add some lines of pseudo code at least to help question author
    – surajs1n
    Oct 28, 2019 at 13:02

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.