Day 4 of React — As a Beginner

Things I’ve learned on day 4…

Photo by Christopher Gower on Unsplash

Things I’ve learned today:

1. Conditional Rendering
2. Rendering Lists

1. Conditional Rendering

• Conditional Rendering is super important because it renders JSX depending on the condition, just like if…else statement in JavaScript.
• There are 2 ways in which you can make conditional rendering (if not more).
  Using if…else statement and using Ternary Operator ? :
• You should also keep Short Circuiting (&& and ||) in mind while writing conditional rendering statements. So that you can take advantage of them too!
• Make sure to check out this React article for more info! — https://react.dev/learn/conditional-rendering

2. Rendering Lists

• If you want a list of items or data to be rendered one by one in React, you can render them using Objects in JavaScript. Like so:

"App.js” Code with Data for a List Rendering

• Here’s the code for Profiles Component:

Profiles Component used for Rendering Lists from it’s props

• Here’s the Output:

Output for the Above React Code

• Note that I’ve used filter() and map() method for storing values inside the array based on different condition which was specified inside the filter() method.
• If you see the console in the browser, you can see that there’s an error which asks us to have keys for our lists. Which I’ll cover tomorrow!

That’s a wrap for now…🚀

Tomorrow I’ll cover the concepts of keys, useState() and other related stuff.

I hope you find this blog useful. If you did then make sure to let me know by commenting, clapping and sharing this blog to your friendly developers!

Bye…😁🤟

Resources that I’ve used while making this blog

• How to use an array which got passed as “props” from a component to another component: https://bobbyhadz.com/blog/react-pass-array-as-prop
• Rendering Lists and other crucial information about them: https://react.dev/learn/rendering-lists
• React assumes your functions/components as Pure Functions: https://react.dev/learn/keeping-components-pure