E2EHIRING Logo
Jobs
Jobs
courses
Courses
mentorship
Mentorship
more
Moredropdown
E2EHIRING Logo
more
Jobs
Jobs
courses
Courses
mentorship
Mentorship
HomeSepratorIconBlogsSepratorIconReact (how to use props)SepratorIcon

React (how to use props)

Han SoloAnbarasan Murugan
calendar27 Jun 2022
poster

React props:

  • Props Stands for properties.
  • Props are arguments passed into React components.
  • Props are passed to components via HTML attributes.

Pass Data:

  • Props are also how you pass data from one component to another, as parameters.

Example:

import React from 'react';
import ReactDOM from 'react-dom/client';

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  return (
    <>
        <h1>Who lives in my garage?</h1>
        <Car brand="Ford" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Output:
Who lives in my Garage?
I am a Ford!

Recent Posts

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

How to publish your Android app on Google Play Store

How to publish your Android app on Google Play Store

Creating Dynamic User Interfaces with Android Motion Layout

Creating Dynamic User Interfaces with Android Motion Layout

Bean Life Cycle

Bean Life Cycle

Pom.XML

Pom.XML

copycopycopycopy

Han Solo

Recent Posts

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

How to publish your Android app on Google Play Store

How to publish your Android app on Google Play Store

Creating Dynamic User Interfaces with Android Motion Layout

Creating Dynamic User Interfaces with Android Motion Layout

Bean Life Cycle

Bean Life Cycle

Pom.XML

Pom.XML