Conditional rendering is a term to describe the ability to render different user interface (UI) markup if a condition is true or false. In React, it allows us to render different elements or components based on a condition.
There are several methods for conditional rendering in React, such as using element variables, logical operators, conditional operators, or preventing components from rendering
There are different ways you can implement conditional rendering in React.js, such as using conditional statements, element variables, logical operators, or preventing a component from rendering¹.
For example, you can use an if...else statement to create elements when certain conditions are met. You can also use element variables to store JSX elements and render them when required. Another method is to use logical operators like && or ? : to embed expressions in JSX. You can also prevent a component from rendering by returning null from its render method
I don’t have a preference for any method of conditional rendering. It depends on the situation and the complexity of the logic. Some methods may be more concise or readable than others. In this context, one prefer to use logical operators for simple conditions and element variables for complex ones.
1. Make a single page application which changes the body of the background based on the season of the year(Autumn, Winter, Spring, Summer)
2. Make a single page application which change the body of the background based on the time of the day(Morning, Noon, Evening, Night)
1. Fetching data takes some amount of time. A user has to wait until the data get loaded. Implement a loading functionality of a data is not fetched yet. You can simulate the delay using setTimeout.
Solution: src/day-9/exercises/BgColorSwitcher.js