4/2/25, 10:39 a.m.

React Props

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

React Props
❮ Previous Next ❯

Props are arguments passed into React components.

Props are passed to components via HTML attributes.

props stands for properties.

React Props
React Props are like function arguments in JavaScript and attributes in HTML.

To send props into a component, use the same syntax as HTML attributes:

Example
Add a "brand" attribute to the Car element:

const myElement = <Car brand="Ford" />;

https://www.w3schools.com/REACT/react_props.asp 1/9
4/2/25, 10:39 a.m. React Props

The component receives the argument as a props object:

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
Example
Use the brand attribute in the component:

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

Run Example »

Get Certified!
school
w3 s

5
CE

02
TI 2
Complete the React modules, do the exercises, take the exam and become

R
FI .
ED

w3schools certified!!

$95 ENROLL

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

Example
Send the "brand" property from the Garage component to the Car component:

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

https://www.w3schools.com/REACT/react_props.asp 2/9
4/2/25, 10:39 a.m. React Props

function Garage() {
 Tutorials
return (  Exercises  Services   Sign Up Log in
<>
HTML
 CSS JAVASCRIPT
<h1>Who lives in my SQL PYTHON
garage?</h1> JAVA PHP HOW TO W3.CSS C
<Car brand="Ford" />
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

Run Example »

If you have a variable to send, and not a string as in the example above, you just put
the variable name inside curly brackets:

Example
Create a variable named carName and send it to the Car component:

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

https://www.w3schools.com/REACT/react_props.asp 3/9
4/2/25, 10:39 a.m. React Props

Run Example »
Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
Or if it was an object:

Example
Create an object named carInfo and send it to the Car component:

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

function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

Run Example »

Note: React Props are read-only! You will get an error if you try to change their value.

?
Exercise

https://www.w3schools.com/REACT/react_props.asp 4/9
4/2/25, 10:39 a.m. React Props

Which one is a correct way of sending the value 'John' via the 'firstname'
 Tutorials  Exercises  Services  
property to the Person component?
Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
root.render(<Person firstname='John' />);

root.render(<Person props(firstname='John') />);

root.render(Person(firstname='John'));

Submit Answer »

❮ Previous Next ❯

Track your progress - it's free! Sign Up Log in

ADVERTISEMENT

https://www.w3schools.com/REACT/react_props.asp 5/9
4/2/25, 10:39 a.m. React Props

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

https://www.w3schools.com/REACT/react_props.asp 6/9
4/2/25, 10:39 a.m. React Props

COLOR PICKER 
 Tutorials  Exercises  Services  Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C



ADVERTISEMENT

ADVERTISEMENT

https://www.w3schools.com/REACT/react_props.asp 7/9
4/2/25, 10:39 a.m. React Props

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

ADVERTISEMENT

 PLUS SPACES GET CERTIFIED

FOR TEACHERS FOR BUSINESS CONTACT US

Top Tutorials Top References

HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
https://www.w3schools.com/REACT/react_props.asp 8/9
4/2/25, 10:39 a.m. React Props
PHP Tutorial HTML Colors

 Java Tutorial
Tutorials 
C++ Tutorial
Exercises  Services  Java Reference

Angular Reference
Sign Up Log in
jQuery Tutorial jQuery Reference
HTML
 CSS TopJAVASCRIPT
Examples SQL PYTHON JAVA
Get PHP
Certified HOW TO W3.CSS C

HTML Examples HTML Certificate

CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

    

FORUM ABOUT ACADEMY

W3Schools is optimized for learning and training. Examples might be simplified to
improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we
cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of
use, cookie and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by

W3.CSS.

https://www.w3schools.com/REACT/react_props.asp 9/9