-
-
Save otaviocorrea/611f8952a1165ee4cf71d08f2ef0c1de to your computer and use it in GitHub Desktop.
React render function organization
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class ParentComponent extends Component { | |
render() { | |
// My basic render function structure: | |
// 1) Extract values from props and state | |
const {a, b, someBoolean, someList} = this.props; | |
// 2) Render any dependent items into temporary variables, such as conditional components or lists | |
const conditionalComponent = someBoolean ? <SomeComponent /> : null; | |
const listItems = someList.map(item => <ListItem item={item} />); | |
// 3) Use a single JSX structure, with the temporary variables in the correct spots. | |
// Note that I avoid logic inline in my JSX. That's perfectly legal, but I prefer to | |
// make the use of that logic as clear as possible by keeping it outside the JSX. | |
return ( | |
<div> | |
<div>A: {a}, B: {b}</div> | |
{conditionalComponent} | |
{listItems} | |
</div> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment