Assignment 5 due 11/04 3:59pm
Sometimes we only want things to render when a certain condition is met. For example, only display text when we meet a certain condition. React has conditional rendering to make this very simple.
In this example, we have a functional component
PrelimTime that takes in a
prelimToday is a boolean holding whether we have a prelim
today or not. We want the component to display "I have a prelim today." if
true and "I don't have a prelim today." if it is
Traditionally, we would use the
if statement for this behavior (as shown
above). We can also use conditional rendering to make writing this functionality
First we can use the ternary operator:
The ternary operator is also very common in other languages as well such as Java or Python. The basic syntax is as follows:
? you have your expression producing
false. The part
? but before the
: is the result/functionality you want if the
boolean expression evaluates to
true. The part after the
: is what you want
to happen if the expression is
Connecting with the
PrelimTime example, my boolean expression was just the
prelimToday, although in your code it can be a more complex boolean
prelimToday is true, I display "I have a prelim today." If
prelimToday is false, I display "I have a prelim today."
Notice though, how the only thing changing in this text is adding the word
false. So only if
want to add don't.
React supports the use of
Here, we display the text "I have a prelim today.". However, in the curly
false then the word "don't" will be rendered.
Conditional rendering with
&& is useful when you only have expected behavior
for one branch of the conditional. In this case, I only had desired behavior if
As you have seen, React's conditional rendering made modifying render behavior based on conditions a lot easier. In this small example, we went from five lines of code in the component to just one!
Composition and inheritance are two programming techniques for defining how classes relate to objects. (Think of classes as the blueprint for a house and objects the actual houses created from that blueprint)
Composition defines a class as the sum of its individual parts. This is a "has-a" relationship (e.g. a car has a steering wheel, has a window, etc). In Java (and other object oriented languages), these components are represented as instance variables.
Inheritance derives one class from another. If class A is the parent of class B and C, B and C inherit the properties/functions of A. This is a "is-a" relationship (e.g. car is a vehicle, circle is a shape.)
“React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.” -- React Docs
Components may not know their children ahead of time.
Children are the components you put within another component:
children prop to pass in children components.
props.children will have the paragraph elements.
We didn't actually get to this live demo, adapted from this tutorial in the React docs, during lecture but it is very simple if you want to try it out yourself. We also show how to import styles.
Less common but you also may want multiple "holes" in your component (for example, a left and right child):
This section was a live demo, adapted from this tutorial in the React docs.
Check lecture video for a more detailed explanation.