According to https://reactjs.org/docs/conditional-rendering.html
When to use conditional rendering ?
In my perspective :
If the component is a stateful component, and you want to render different element according to the states inside the component.You might also have some event handler to interact with user activities, and the states changes which causes a render update.Then you could consider conditional rendering.
How to start?
Prepare three things : States / Methods / Components
Let’s dive into it — -A BubbleControl Component.
First thing first, I’ll provide whole codes on my codepen!!!
Section 1 : Define the state and bind the methods /Define the event handlers
Section 2 : render and return what you want to display on the DOM
Section 3 : Define components
Section 4 : Don’t miss the HTML and CSS