What are Props in React?

Props are passed from a parent component to the child component. Now, if you haven’t understood props yet, it allows us to reuse a component logic dynamically which means that the data or information in the component will not be static. We’ll understand this with the help of an example later on.

Props Syntax

We can use the react props in two different ways and both have their own different syntaxes. The two ways of using props in react app are:

Without destructuring:

The syntax of defining props without destructuring is given below.

function Course(props) {
    <div>{props.courseName}</div>
}

With destructuring:

The syntax of defining props as a destructuring argument is given below.

function Course({courseName}) {
    <div>{courseName}</div>
}

The detailed working of both the given methods is explained below in this blog.

How to use Props in React?

Now let’s see a full example and understand how we can use props in a react app. Props are very easy to understand. In this example, we’ll need two things: first one is the main function component (App.js) and a second component (Course) which we is going to render in our App.js component.

App.js Component File:

This is the App component (parent) which is the main file of a React application and in this component, we’ll be rendering our second component i.e., Course component which acts as a child component in which we’ll be passing props.

import React from 'react'

export const App = () => {
  return (
    <div>
      <h1>Online Learning Courses</h1>
    </div>
  )
}

Course component

This component will have a prop called courseName which will get its value dynamically after rendering inside the App.js component.

import React from 'react'

export const Courses = (props) => {
  return (
    <div>
        <ul style={{fontSize:'25px',color:'green'}}>
            <li>{props.courseName}</li>
        </ul>
    </div>
  )
}

Different ways of using props in react

Till now we have understood the basic syntax of using props in react and now we’ll learn what are the ways through which we can use props in a react app. So, there are two ways of using props and those are discussed in detail below.

1. using Props without Destructuring

The First way of using props is to use them without destructuring. When using props without destructuring we pass an argument known as props in the function. Let’s understand it step by step with the help of an example.

Step 1: Pass “props” as argument in function

To use props, we first pass the “props” keyword as an argument into our function which can be seen as follows.

Courses = (props) => {
      ......
      ......
}

Step 2: Using variables directly in JSX template

Here we are not declaring the variables before rather we are using them directly into our JSX template i.e., into our <li> element.

Courses = (props) => {
  return (
    <div>
        <ul style={{fontSize:'25px',color:'green'}}>
            <li>{props.courseName}</li>
        </ul>
    </div>
  )
}

Step 3: Pass data in App.js component

Now our data will be passed to the main component i.e. App.js and will look like we are passing the attributes.

import React from 'react'
import { Courses } from './Courses'

export const App = () => {
  return (
    <div>
      <h1 style={{color:"red", lineHeight : 2, padding: 10}}>Online Learning Courses</h1>
      <Courses courseName="FrontEnd Developer" />
    </div>
  )
}

Output:

After passing the props, your output will look like below.

So, now we can use data dynamically for any component with the above method and can declare multiple props as per our requirement. Next we’ll see how to use props with destructuring.

2. using Props with Destructuring

Compared to the above method (without destructuring), this is the most commonly used method to use props as it becomes very easy to modify the function and also it takes less time therefore making it as an optimized way.

In this method, we don’t declare variables first or pass them directly to the JSX template. Instead of passing the props as an argument we destructured and passed in the variables like the function argument. Let’s understand this in detail and see it step by step with the help of an example.

Step 1: Destructuring the Course component

Here we are not declaring the variables rather we are destructuring and passing the variables as function arguments. We can read these props by listing their names which are available inside ({ and }) directly after the Course component.

Course = ({courseName, courseType}) => {
  return (
    <div>
        <ul  style={{fontSize:'25px',color:'green'}}>
            <li>{courseName}</li>
            <li>{courseType}</li>
        </ul>
    </div>
  )
}

Step 2: Pass data in App.js component

Now our data will be passed to the main component i.e. App.js and will look like we are passing the attributes.

import React from 'react'
import { Course } from './Course'

export const App = () => {
  return (
    <div>
      <h1 style={{color:"red", lineHeight : 2, padding: 10}}>Online Learning Courses</h1>
      <Course courseName="FrontEnd Developer" courseType="Developer" />
    </div>
  )
}

Output:

After passing the props, your output will look like below.

How to specify default value of prop

Sometimes, we don’t want the props value to be empty or when no value is specified, at that time we can specify a default value just by destructuring and putting = sign and the default value right after the parameter as shown below.

Course = ({courseName, courseType}) => {
    ......
    ......
}

Conclusion

In this blog, we learned about props in react, how they are used, their syntax, and different ways of using props. We hope you get a better understanding of how the default value of props are set. To read props, we saw two ways i.e., with and without destructuring. To get more understanding of props, make sure to do practice of them.

References:

https://www.knowledgehut.com/blog/web-development/what-is-react-props

https://www.freecodecamp.org/news/how-to-use-props-in-react/

The JavaScript ternary operator is a single line control flow statement. The ternary operator is a short way to declare a conditional statement. and js ternary operator is the only operator that takes three operands.

Syntax for Ternary Operator:

The ternary operator evaluates the test condition.

If the condition is true, Result1 is executed.

If the condition is false, Result2 is executed.

Example of Ternary Operator:

with the Ternary Operator

Output1 :-

Suppose the user enters 78. Then the condition marks >= 40 is checked which evaluates to true. So the first expression pass is assigned to the result variable.

Output2 :-

Suppose the use enters 35. Then the condition marks >= 40 evaluates to false. So the second expression fail is assigned to the result variable.

Ternary Operator Used Instead of if…else :

without the Ternary Operator

With the Ternary Operator

The output of both programs will be the same.

Output:-

conclusion:

• Ternary operator belongs to both the operators & conditionals category.
• It is a replica of the if-else conditional, so its functions are similar to an if-else statement.
• The only difference is the number of lines of code.
• The expression that comes first after the condition is always treated as true and the next one is treated as false similar to an if-else statement.

References:

• https://www.programiz.com/javascript/ternary-operator
• Make Your Code Cleaner with JavaScript Ternary Operator (javascripttutorial.net)