9 React conditional rendering methods

Controlling the flow of your React application is crucial to getting the result that you are looking for. Learn more about React conditional rendering methods in this video.

Introduction -- 00:00
if/else: the entire return value -- 01:41
null: prevent rendering by returning null value -- 03:43
element variables: storing JSX inside variables -- 05:56
ternary operator: inline if/else -- 06:57
short-circuit && operator: avoid in React Native -- 09:14
IIFEs (immediately invoked function expressions) -- 11:11
sub components -- 13:24
If components -- 14:44
Higher-Order Components (HOCs) -- 17:41

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

[saravanan-subramanian]

What a charming and engaging presentation on some beautiful patterns which makes react a delight to work with! I really enjoyed it! Thank you, Leigh! 🙏🙏

[Colstonewall]

My man, Leigh Halliday! Good job, man.

[brandonchuck]

Super helpful and clear explanation thank you!!! 🙏

[kelechinwuba-onyejeana]

Nice presentation well explained. Towards the end you set values into the localstorage through the console. Can that be a security risk? can that be prevented?

[errinwright]

What about conditional rendering CLASSNAMES following a comments.map((comment, key) => {}, e.g. show a Pink heart when you LIKE. any one of those comments you had.