Learn React Conditional Rendering in 10 Minutes
In this video we will take a look at a very common React technique - Conditional Rendering.
#react #reactjs #reactjstutorial
As we discussed in previous videos, JSX is just JavaScript by it's nature. And because of that, we can use the same if/else statements to conditionally show components or its parts.
We can use both classic if/else JavaScript syntax, or more modern version with question mark (?) and colon (:)
--------------------------------
Hello, my name is Konstantyn, I'm a Frontend Engineer working in a lovely city of Warsaw. My main technology stack is React. Please ask me questions in comments and subscribe for more tutorials like this!
✅ Follow Me:
LinkedIn: / kostiantyn-burlai
Github: https://github.com/burlai
☕ Buy Me A Coffee: https://www.buymeacoffee.com/konstantyn
--------------------------------
So the most common scenario is that we have some prop which could be true or false. And based on the value of this prop we showing to the user different content.
In this example if the item is done, we will display the checkmark together with item name. As you see, this is just the ordinary JavaScript function, the only specific thing about it is that it is returning JSX markup.
If the prop is a boolean, you can also just put it into the element, without providing the value of `true`.
And if the value of `isDone` is false, we can simply not put it in component.
There is more modern, compact and verbose syntax for defining conditional rendered content. It is called conditional or ternary operator.
Please pay attention, that in this case we don't repeat the code, but including just the content which could change depending on the condition. It is much more efficient and readable and you should prefer use this method of conditional rendering in your components.
![Bartosz Domiczek - D2 Talks #33 [interviewed by Fabio Palvelli]](https://images.mixrolikus.cc/video/_sQkFBCvblE)
