Logo

dev-resources.site

for different kinds of informations.

{ Understanding PROPS in React.js }

Published at
1/3/2025
Categories
react
reactjsdevelopment
javascriptlibraries
techblogs
Author
shreyansii
Author
10 person written this
shreyansii
open
{ Understanding PROPS in React.js }

PROPS meaning properties in React.js, and these properties/property can be passed from one component to another component ( for example : a property passed from parent component to the child component).

  • These properties are read-only.
  • Through these, parent component can send data to child component.

Image description

As we can we in the above picture, App.jsx is the parent component and Student.jsx is the child component. The key-value pair (name="Spongebob") from parent component is being passed to child component 'Student', and then that key value pair gets stored in PROPS object.

Now, to have the value of name from PROPS object, we use props.name and that is what we can see is done in the child component Student. So, this way we can retrieve value in child component from parent component ( via PROPS object).

In App.jsx :

Image description

In Student.jsx :

Image description

In localhost :

Image description

So, this is a topic in React.js that took me quite some time to understand and grasp the concept, but at the end, the satistaction of finally understanding it made all that effort worth it.

reactjsdevelopment Article's
30 articles in total
Favicon
Introducing EAS Hosting: Simplified deployment for modern React apps
Favicon
React-copytext
Favicon
{ Understanding PROPS in React.js }
Favicon
reactJs
Favicon
How to Check and Fix Memory Leaks in React Applications
Favicon
Top 10 React js interview questions.
Favicon
How ReactJS Development Services Enhance User Experience and Performance
Favicon
Beginner SEO in React JS - React Helmet
Favicon
How We Automated 80% of Our Code with Exocoding
Favicon
Custom Hooks in React: Why and How to Create Them
Favicon
🚀 React Best Practices for Scalable Frontends: Part 4 – Performance Optimization and Efficient Rendering
Favicon
SOLID Principles for React / React Native Development
Favicon
How I Started My Journey as a MERN Stack Developer
Favicon
🌱 Responsive Planto Ecommerce Website with React, Vite, TypeScript & Tailwind CSS 🌱
Favicon
A Comprehensive Guide to React JS Courses: Everything You Need to Know
Favicon
React Summit 2025 is back on June 13 & 17!
Favicon
Server-Side Rendering with React.js
Favicon
Getting Started with React Native: From Effort to Ease 🚀
Favicon
Mastering the Most Useful Next.js and React Features for 2025
Favicon
The Top React Reporting Tools
Favicon
Why Choose ReactJS for Your Development?
Favicon
React & Me: Day 1 Shenanigans 😎
Favicon
Why are Props Immutable in React?
Favicon
The Top React Spreadsheet Tools
Favicon
Exploring React 19 🔥🔥
Favicon
Supercharge Your React App with ImageKit.io: Fast & Optimized Images âš¡
Favicon
React Hooks
Favicon
How Much Does It Cost to Build an App Using ReactJS?
Favicon
What's New in React 19 latest stable release?
Favicon
Why React Native is the Best Choice for Your Mobile App?

Featured ones: