Props in React.js

What are “props” and how do we really use it? Assuming, we all know about react Components, which are reusable, meaning they can return any JSX, which can be included in any part of our application. Let's build a simple app whose only job is to welcome a user by their name.

Access Props in Functional Component

Here the parent is App.js, which is a class component, and its child Welcome.js is a functional component.

//this is App.js
import React, { Component } from 'react';
import Welcome from './Welcome.jsx';
class App extends Component {
 render() {
    return (
     <div>
      <Welcome/>
      <Welcome/>
      </div>
    );
  }
}
export default App;

In App.js, we are rendering Welcome which is a functional component, twice, inside the return function. The Welcome.js file looks like this:

//this is Welcome.js file
import React from 'react';
const Welcome = () => {
    return <h1>Hello Joe Goldberg</h1>
  }
export default Welcome;

Now if we tune into http://localhost:3000/, the result should like this:

Because we are rendering the Welcome component twice in App.js, it will print Joe Goldberg twice, returning the inner text of the h1 element from the Welcome function.

But, what if we want to make this component dynamic? Meaning we want to print different usernames or welcome different people, using the same component. Now we can make good use of Props, which is also known as properties. Think about how we add attributes, such as CSS class to an HTML element. Similar idea, we want to add props to our component as their property or attribute and set it equals to the desired value, in this case, username. After assigning values to our props, we have to somehow send props from App.js to Welcome.js, let us take a look:

//this is App.js
import React, { Component } from 'react';
import Welcome from './Welcome.jsx';
class App extends Component {
render() {
    return (
     <div>
      <Welcome name="Joe Goldberg"/>
      <Welcome name="Mrs Maisel"/>
      </div>
    );
  }
}
export default App;

In App.js, we have named our props as “name” and have set it equals to the desired username. Now we have to pass the props to the Welcome component.

//this is Welcome.js
import React from 'react';
const Welcome = (props) => {
  //console.log(props);
    return <h1>{props.name}</h1>
  }
export default Welcome;

Notice that App.js which is a parent component is passing props as a parameter in the Welcome function (arrow function), which can be then used in the function body. If we console.log props, we can see that props are nothing, but a plain javascript object with key and value pairs. We can access the key of “name” using (.) dot notation like this, props.name inside curly brackets because it is a JSX expression.

//console.log(props)
>{name: "Joe Goldberg"}
>{name: "Mrs Maisel"}

Now if we tune into http://localhost:3000/, the result should like this:

We have successfully made our component dynamic by using props!

Access Props in a Class Component

Now we will rebuild the same app, whose job is to say goodbye to the users, using their username. In App.js, we are rendering the Goodbye component which is a child, twice and passing the “name” as our props.

// this is App.js
import React, { Component } from 'react';
import Goodbye from './Goodbye.jsx'
class App extends Component {
 render() {
    return (
     <div>
      <Goodbye name="Joe Goldberg"/>
      <Goodbye name="Mrs Maisel"/>
      </div>
    );
  }
}
export default App;

Unlike Welcome which was a functional component, Goodbye will be a class component:

//this is Goodbye.js
import React, { Component } from 'react';
class Goodbye extends Component {
  render() {
    return (
      <h1>Goodbye {this.props.name}</h1>
    );
  }
}
export default Goodbye;

Notice the difference, we are not sending props as parameters anymore. Since Goodbye is a class component, props will be accessed with “this” keyword which is a reserved word in react. Now we can render the h1 element with the associated username using this.props.name inside curly brackets.
Now if we tune into http://localhost:3000/, the result should like this:

A key thing to remember is props are immutable! If we try to do this:

his.props.name = "Jon Snow";

Our application will break and throw an error at us. Try it yourself!

Points to be noted:

1. Props can be any data type
2. String
3. Integer
4. Array
5. Objects
6. Functions
7. Boolean
8. Props are immutable