ReactJS Props

The main difference between state and propspropsis immutable. This is why the container component should define states that can be updated and changed, while child components should only use props to pass data from the state.

Using props

App.jsx

import React from 'react';
class App extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}

main.js

import React from 'react';
import ReactDOM from 'react-dom
import App from '.'/App.jsx';
ReactDOM.render(<App headerProp="Header from props..." contentProp="Content
　　　from props..."/> document.getElementById('app'));
export default App;

This will produce the following result.

Default props

You can also set default property values directly on the component constructor, instead of adding them to the reactDom.render () element.

App.jsx

import React from 'react';
class App extends React.Component { render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
App.defaultProps = {
　　　headerProp: "Header from props...",
　　　contentProp: "Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom
import App from '.'/App.jsx';
ReactDOM.render(<App/> document.getElementById('app'));

The output is the same as before.

state and props

The following example shows howstateWe set the state in the parent component and then usepropsPassing it to the component tree. InrenderWithin the function, we are settingheaderPropandcontentPropUsed in child components.

App.jsx

import React from 'react';
class App extends React.Component {
　　　constructor(props) {
　　　　　　super(props);
　　　　　　this.state = {
　　　　　　　　　header: "Header from props..."
　　　　　　　　　content: "Content from props..."
　　　　　　}
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<Header headerProp={this.state.header}/>
　　　　　　　　　　　　<Content contentProp={this.state.content}/>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Header extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.props.headerProp}</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class Content extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h2>{this.props.contentProp}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom
import App from '.'/App.jsx';
ReactDOM.render(<App/> document.getElementById('app'));

The result will be the same as the previous two examples, the only difference is our data source, which originally comes fromstateWhen we want to update it, we just need to update the state, and all child components will be updated.