[React] [Question] Naming convention for methods that return jsx partials

Hi All!

I’m not sure this is actually something worth adding to the guidelines so I thought I’d get feedback/ opinions before opening a PR myself…

My suggestion is that methods that render jsx partials be prefixed with ‘render’

For instance:

// bad - suggests data getting
getHeading = () => {
    return <Header>{this.props.header}</Header>
}

// good - returns JSX to be rendered
renderHeading = () => {
    return <Header>{this.props.header}</Header>
}

Of course the method doesn’t actually render any JSX in to the DOM at this stage so it could be argued that render___ is misleading.

Any thoughts on this? If it seems reasonable I can put together a more formal PR this evening - Thanks!

[spen]

Thanks for the conversation @Bamieh & @ljharb - learning lots! I’d be more than happy to open some PR’s and help out!

I’m personally not a big fan of the maybeRender__ pattern anyway, it feels ambiguous!
I’m usually in preference to something like: { isSomething && <Component /> } or a ternary

[Bamieh]

@ljharb Thanks for the clarification. In the dateRangePicker.jsx in react-dates repo, there are 2-3 functions like that, like maybeRenderDayPickerWithPortal and renderDayPicker. But i believe this whole component should be refactored to have the portal in another component/wrapper, since its not the calendar’s concern where its at. Its up to the user to use a portal or not.

https://github.com/airbnb/react-dates/blob/master/src/components/DateRangePicker.jsx#L317