Props in React.js with Examples

Props in React.js with Examples

Props (short for "properties") in React are used to pass data from a parent component to a child component. They are read-only and help make components reusable.

1. Functional Component Example (Using Props)

In functional components, props are received as function parameters.(Arrow function)

Three.js

import React from 'react';

 

const Three = (props) =>

{

  return(<div>

    <h1>{props.name}</h1>

    <h1>{props.city}</h1>

  </div>)

 

}




export default Three;

 

App.js

 


import './App.css';

import Three from './components/Three';




function App() {

  return (

    <div className="App">

     

      <Three name="John" city="Kota"/>

     

 

    </div>

  );

}

 

export default App;

 

 

 

Function Component example Two

 

import React from "react";

 

function First(props)

{

  return(<div>

    <h1>{props.name}</h1>

    <h1>{props.age}</h1>

  </div>)

}

 

export default First

 

Explanation:

  • The Student component receives props and displays name and course.
  • The App component passes different values for name and course to different Student components.

2. Class Component Example (Using Props)

In class components, props are accessed via this.props.

import React, { Component } from "react";

 

import React, { Component } from "react";




class Sec extends Component

{

  render()

  {

    return(<div>

      <h1>{this.props.pageName}</h1>

      <p>{this.props.greet}</p>

    </div>)

  }

}

 

export default Sec;



Explanation:

  • In the Student class component, this.props.name and this.props.course are used to access the passed props.
  • The App component passes different props to different instances of the Student component.

Key Differences Between Functional and Class Components for Props

Feature

Functional Component

Class Component

Syntax

Uses function parameters

Uses this.props

Readability

More concise and easier to read

More verbose

State Management

Uses useState (Hooks)

Uses this.state

Performance

More performant as there is no this binding

Less performant due to this binding

Conclusion

  • Use functional components with props when possible, as they are simpler and preferred in modern React (with hooks).
  • Use class components only when working with legacy codebases.

 

Comments

Post a Comment

Popular posts from this blog

Axios in React.js

  Axios in React.js What is Axios? Axios is a popular JavaScript library used to make HTTP requests (GET, POST, PUT, DELETE) in React applications. It is based on Promises and provides a simple way to interact with APIs. Why Use Axios? ✅ Supports request and response interceptors ✅ Handles automatic JSON conversion ✅ Supports error handling ✅ Can cancel requests using abort controllers ✅ Works in browsers and Node.js 1. Installing Axios in React Before using Axios, install it in your React project: npm install axios 2. Making a GET Request (Fetching Data) Axios is commonly used to fetch data from an API inside useEffect() . Example: Fetching Data with Axios ( GET Request) import React , { useEffect , useState } from 'react' ; import axios from 'axios' ;   const UserList = () => {       const [ users , setUsers ]   = useState ([]);       // web loading web mounting      ...
Read more

Conditions in React.js

  Conditions in React.js In React, conditional rendering is used to display different UI elements based on conditions. There are multiple ways to handle conditions in React. 1. Using if-else Statements (Inside Function Components) Traditional if-else statements can be used inside a function. Example: Conditional Rendering Using if-else import React from 'react' ;   const Message = ({ isLoggedIn }) => {       if ( isLoggedIn )     {         return < h2 > Welcome back, User! </ h2 > ;     }     else {         return < h2 > Please log in. </ h2 > ;     }   }   export default Message ; App.js   import './App.css' ; import Message from './components/Message' ; function App () {   return (     < div className = "App" >         < Message isLoggedIn = "" />   ...
Read more

Applying map() Function in React.js (Arrays & Objects)

  Applying map() Function in React.js (Arrays & Objects) 1. Using map() on Arrays in React The map() function is used to iterate over an array and transform its elements into JSX elements. Example: Rendering a List from an Array import React from 'react' ;   const students = [ "John" , "Alice" , "Bob" ];   const StudentList = () => {       return (         < div >             < ul >                 {                     students . map (( student , index ) => ( < li key = { index } > { student } </ li > ))                 }             </ ul >         </ div >     )   }   export default StudentList ; Key Points map() loops over the studen...
Read more