JS Tutorial - Props

Props
Props, short for properties, is the optional input that our component can accept. It allows the component to be dynamic and makes the component reusable.
To specify props for a component, we specify them as attributes.
To specify name property, we simply add the name attribute. And to the attribute, we assign the value.

// App.js
import React from 'react';
import Greet from './components/Greet';

function App() {
  return (
    <div className="App">
      <Greet name="Bruce" heroName="Batman" />
      <Greet name="Clark" heroName="Superman" />
      <Greet name="Diana" heroName="Wonder Woman"/>
    </div>
  );
}

export default App; 

React is going to bundle all such attributes into an object which we, like convention, call as props.
Props in functional component
So now we are sending some information(some property) to the Greet component. But how do you retrieve these values in the Greet component?
We need to ask react to evaluate the expressioin( props.name ) by wrapping the expression with curly braces. The curly braces is a feature of JSX.

// components/Greet.js
import React from "react";

const Greet = props => {
  return(
    <div>
      <h1>Hello {props.name} a.k.a {props.heroName}</h1>
    </div>
  )
}
export default Greet; 

🖥

Hello Bruce a.k.a Batman
Hello Clark a.k.a Superman
Hello Diana a.k.a Wonder Woman

Props in class component

// App.js
import React from 'react';
import Greet from './components/Greet';
import Welcome from './components/Welcome';

function App() {
  return (
    <div className="App">
      <Greet name="Bruce" heroName="Batman" />
      <Greet name="Clark" heroName="Superman" />
      <Greet name="Diana" heroName="Wonder Woman"/>
      <Welcome name="Bruce" heroName="Batman" />
      <Welcome name="Bruce" heroName="Batman"/>
      <Welcome ame="Diana" heroName="Wonder Woman"/>
    </div>
  );
}

export default App; 

Unlike the functional component, where we specify the props parameter, in the class component the properties are available through this.props , which is reserved in class components.

// components/Welcome.js
import React, { Component } from "react";
 
class Welcome extends Component {
  render() {
    console.log('this.props', this.props)
    return (
      <div>
        <h1>Welcome {this.props.name} a.k.a {this.props.heroName}</h1>
        {this.props.children}
      </div>
    )
  }
}

export default Welcome

🖥

Hello Bruce a.k.a Batman
Hello Clark a.k.a Superman
Hello Diana a.k.a Wonder Woman
Welcome Bruce a.k.a Batman
Welcome Bruce a.k.a Batman
Welcome a.k.a Wonder Woman

props.childrenSometimes, it is also possible that you might not have an idea as to what content is being passed in. But we want the component to render that unknown content.
We can do that by specifying the content between the opening and closing tag of the component and retrieving it using the reserved children property in the props object.

// App.js
import React from 'react';
import Greet from './components/Greet';

function App() {
  return (
    <div className="App">
      <Greet name="Bruce" heroName="Batman">
        <p>This is children props</p>
      </Greet>
      <Greet name="Clark" heroName="Superman">
        <button>Action</button>
      </Greet>
      <Greet name="Diana" heroName="Wonder Woman"/>
    </div>
  );
}

export default App; 

// components/Greet.js
import React from "react";

const Greet = (props) => {
  return(
    <div>
      <h1>Hello {props.name} a.k.a {props.heroName}</h1>
      {props.children}
    </div>
  )
}
export default Greet; 

If you have no clue what is goint to be passed as props or if you have to pass in dynamic html content, pass it between the component tags. And in the component definition, simply render the content using props.chidrenIf something is specified, it is rendered in the browser. And if nothing is passed, props.children simply renders nothing.
🖥

Hello Bruce a.k.a Batman
This is children props
Hello Clark a.k.a Superman
Action
Hello Diana a.k.a Wonder Woman

Props are immutable
There is one strict rule: props are immutable.
In simpler words, their value cannot be changed.

import React from "react";

const Greet = props => {
  props.name="Lee";
  // TypeError: Cannot assign to read only property 'name' of object '#<Object>'
  return(
    <div>
      <h1>Hello {props.name} a.k.a {props.heroName}</h1>
    </div>
  )
}
export default Greet; 

If props are immutable, how do we maintain component data that may change over time? That is where State comes in the feature.
🔗 ReactJS Tutorial - 9 - Props