Props basically just like properties that pass from one component to another component by using HTML attributes.
As we use and pass the variable in javascript, PHP, and other technology.
In react use the two types of component class and functional component.
Before introducing the functional components react used only class components. In react 16.8 introduce the hooks features that allow you to use state without writing class components. Instead of the class component, we will use the functional component because it’s easy to use and easy to understand.
Component App.js–
import React from 'react';
import './App.css';
import TestComponent from './TestComponent';
function App() {
return (
<div>
<div className="container">
<TestComponent name="Deepak" />
</div>
</div>
);
}
A property ‘name’ like attribute in ‘TestComponent’ just like this-
<TestComponent name=”Deepak” />
Here prop is ‘name’ and now we can use this property in “TestComponent”.These props just return an object of properties and we use like “props.name” to access the name properties into the “TestComponent”
Use props in component
TestComponent.js
import React from "react";
export default function TestComponent(props) {
return (
<div className="register-form">
<p className="text-center">My Name is { props.name}</p>
</div>
)
}
Simply access the name “{props.name}” and the result be “My name is Deepak”
We can pass multiple values in components using attributes like-
<TestComponent name=”Rama” address=”Noida” /> and access same as props.property_name.
Output-
Send state/props to another component onClick event
State: The state is used to change the component state from within. Changes to the state also trigger a UI update like onclick, onchange, and other events.
We store the state/props into the parent component i.e in which component where we trigger the onClick event. Then to pass the state into another component, we simply pass it as a prop.
App.js
import React {useState} from 'react';
import './App.css';
import TestComponent from './TestComponent';
function App() {
const [state, setstate] = useState({data:""})
const changeState = () => {
setstate({data:`Hey! i am a software developer`});
};
return (
<div>
<div className="container">
<TestComponent data={state.data} />
<button onClick={changeState} type="button">
Click me
</button>
</div>
</div>
);
}
Component TestComponent.js
import React from 'react';
import './App.css'
export default function TestComponent(props) {
return(
<div className="main-cointainer">
<h2>TestComponent</h2>
<p>{props.data} </p>
</div>
)
}
Conclusion-
Props for “Properties.” They are read-only components. props are an object which stores the value of attributes of a tag and work similarly to the HTML attributes. It gives a way to pass data from one component to another components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.
Source link
