Using Props

When we need immutable data in our component, we can just add props to reactDOM.render() function in main.js and use it inside our component.

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>

);

}

}

export default App;

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;