Props In React JS Functional Components

In this article we will learn about how to use pro*ps in react JS* and what is props in react JS. Props is a very important concept if you are learning frontend development.

What is Props

In simple way props means properties. So, passing a props meaning pass some properties from parent component to child component. In development we pass our necessary data as a prop from parent component to child component.

`import { useState } from 'react'
import './App.css'
import Card from './components/Card'

function App() {

  return (
    <>
      <h1>Props</h1>
      <div style={{display:"flex", justifyContent:"space-between", width:"90%", margin:"auto"}}>
      <Card title="This is Blog No 1" des="This is the descroption of blog no 1" btn="Read Blog 1"/>
      <Card title="This is Blog No 2" des="This is the descroption of blog no 2" btn="Read Blog 2"/>
      <Card title="This is Blog No 3" des="This is the descroption of blog no 3" btn="Read Blog 3"/>
      </div>
    </>
  )
}

export default App`

The above code is of app.jsx. So app.jsx is parent component and Card is child component. I have used Card component 3 times and passing props or data of title, des and btn. The datas are different but props are same.

Let's see how to get and use those props in our child component.

`const Card = (props) => {
  return (
    <>
    <div className='card'>
        <div className='card-container'>
            <h2>{props.title}</h2>
            <p>{props.des}</p>
            <button>{props.btn}</button>
        </div>
    </div>
    </>
  )
}`

All the props are passed as a object and we get it as a functional argument. Then used the values with there keys. Also, we can de-structure the values and use them. Like the following example.

`const Card = ({title, des, btn}) => {
  return (
    <>
    <div className='card'>
        <div className='card-container'>
            <h2>{title}</h2>
            <p>{des}</p>
            <button>{btn}</button>
        </div>
    </div>
    </>
  )
}`

Hope you understood about what is props. I have created a tutorial video about props. You also can watch it for understand in better way.

Props In React JS In Hindi | What is Props in Hindi | MERN Stack Course - YouTube

Props In React JS In Hindi | What is Props in Hindi | MERN Stack CourseIn this video we will learn about props in react. If you want to know what is props in...

youtube.com