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:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/app.js
import React from 'react';
import { Component } from 'react'; //Class component props
//React Props
class App extends React.Component {
render() {
return (
<div>
<HelloWorld/>
<Hello who="Earth" />
<Message greet="Welcome" who="Aliens" />
<HelloAsClass who="Earth" />
<Valuesofprops prop="My String Value" />
<HelloPeople persons={['Joker', 'Batman']} />
<HelloOptional />
<Message2 greet={hiBatman.greet} who={hiBatman.who} />
<Parent>
<span>I'm a child!</span>
</Parent>
</div>
);
}
}
function HelloWorld() {
return <span>Hello, World!</span>;
}
function Hello(props) {
return <div>Hello, {props.who}!</div>;
}
//Multiple props
function Message({ greet, who }) {
return <div>{greet}, {who}!</div>;
}
//Class component props
class HelloAsClass extends Component {
render() {
return <div>Hello, {this.props.who}!</div>;
}
}
function Valuesofprops({ prop }) {
return <div>{prop}</div>;
}
//Passing down props
function HelloPeople({ persons }) {
return (
<div>
{persons.map((person, index) => {
return <Hello who={person} key={index} />;
})}
</div>
);
}
function HelloOptional({ who = 'Unknown' }) {
return <div>Hello, {who}!</div>;
}
//Props spread syntax
const hiBatman = { greet: 'Hi', who: 'Batman' };
function Message2({ greet, who }) {
return <div>{greet}, {who}!</div>;
}
//Special props children
function Parent({ children }) {
console.log(children); // logs <span>I'm a child!</span>
return <div>{children}</div>;
}
export default App;
