Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.
The primary purpose of props in React is to provide following component functionality:
Pass custom data to your component.
Trigger state changes.
Use via this.props.reactProp inside component's render() method.
For example, let us create an element with reactProp property:
This reactProp (or whatever you came up with) name then becomes a property attached to React's native props object which originally already exists on all components created using React library.
props.reactProp
xxxxxxxxxx
import React from "react";
import ReactDOM from "react-dom";
class ChildComponent extends React.Component {
render() {
return (
<div>
<p>{this.props.name}</p>
<p>{this.props.age}</p>
</div>
);
}
}
class ParentComponent extends React.Component {
render() {
return (
<div>
<ChildComponent name="John" age="30" />
<ChildComponent name="Mary" age="25" />
</div>
);
}
}
xxxxxxxxxx
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
xxxxxxxxxx
function Application() {
const userName = "John Smith";
return <UserInfo userName={userName} />;
}
function UserInfo({ userName }) {
return <span>{userName}</span>;
}
xxxxxxxxxx
function App() {
return <User name="John Doe" />
}
function User(props) {
return <h1>Hello, {props.name}</h1>; // Hello, John Doe!
}
xxxxxxxxxx
const Banner = props => {
const name = props.name
return <div>Hello {name}</div>
}
function App() {
return (
<div>
<Banner name="Ranjeet" />
</div>
)
}
export default App
xxxxxxxxxx
export function Card(props) {
return (
<div>
<h2>{props.name}</h2>
<p>{props.description}</p>
</div>
);
}
import { Card } from './Card.jsx';
export function App() {
return (
<Card
name="Madalena Rocha"
description="Desenvolvedora Front-end"
/>
);
}
xxxxxxxxxx
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = { isOn: true };
}
// ...
}
xxxxxxxxxx
function App() {
return (
<div className="App">
<NewComponent name="Ariful Islam Adil" profession="Web-Developer"></NewComponent>
</div>
);
}
function NewComponent(props) {
return (
<div className="test-class">
<h1>Name: {props.name}</h1>
<h3>Profession: {props.profession}</h3>
</div>
)
}
export default App;
xxxxxxxxxx
function App() {
return (
<div className="App">
<Job salary={90000} position="Senior SDE" company="Amazon" />
<Job salary={12000} position="Junior SDE" company="Google" />
<Job salary={10000} position="Project Manager" company="Netflix" />
</div>
);
}
const Job = (props) => {
return (
<div>
<h1>{props.salary} </h1>
<h1>{props.position} </h1>
<h1>{props.company} </h1>
</div>
)
}
xxxxxxxxxx
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const name = 'John';
const age = 25;
return (
<div>
<ChildComponent name={name} age={age} />
</div>
);
};
export default ParentComponent;