Props In React JS

In This Blog, you are going to learn very useful and important topic called PROPS. We are using props with functional component in react app in this blog but later when we learn class component then also we learn the concept of PROPS with class component.

React PROPS

PROPS In React

• Props stands for properties.
• Props are arguments passed into React components.
• Props are passed to components via HTML attributes.
• 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.
• Props are also act like an object.
• If you have a variable to send, and not a string. you just put the variable name inside curly brackets.
• Note: React Props are read-only (immutable) You will get an error if you try to change their value.
• Props can be used as Children Props.
• Props are also how you pass data from one component to another, as parameters.

HelloMessage.js File – Code

import React from 'react';

function HelloMessage(props) {
    return (
        console.log(props),
        <>
            <h1>Hello {props.name}</h1>
            <h1>Age= {props.age}</h1>
            {props.children}
        </>
    );
}

export default HelloMessage;

Index.js File – Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import HelloMessage from './HelloMessage';
import House from './House';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
let a = "Amir";
root.render(
  <React.StrictMode>
    <House/>
   {/* <HelloMessage name={a} age="29">
    <p>Children Element 1</p>
   </HelloMessage>
   <HelloMessage name="Kumar" age="25">
    <button type="button" value="Click">Click</button>
   </HelloMessage>
   <HelloMessage name="Amit" age="22">
    <h3>Children Element 3</h3>
   </HelloMessage> */}
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

House.js File – Code

import logo from './logo.svg';
import './App.css';
import Person from './Person';


function House() {
  return (
   <Person name="Mohit"/>
  );
}

export default House;

Person.js File – Code

import logo from './logo.svg';
import './App.css';

function Person(props) {
  return (
   <h1>{props.name} lives here..</h1>
  );
}

export default Person;

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/q6salvt9aqfuwq8/PROPS+IN+REACT+JS.rar/file