ReactJS | Props – Set 2

In our previous article ReactJS | Props – Set 1 we had discussed about props, passing and accessing props, passing props from one component to other etc. In this article, we will continue our discussion on props.

So, what if we want to pass some default information using props to our components. React allows us to do so. React provides us with something called defaultProps for this purpose. Let’s see about this in details:

defaultProps

The defaultProps is a method which we can use to store as much information as we want for a particular class. And this information can be accessed from anywhere inside of that particular class. Every piece of information you add inside the defaultProps, that will be added as the prop of that class. It might seem confusing at this point. Let’s look at a program where we will be using defaultProps to create some props for a class.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
// Component
class ExampleClass extends React.Component{
    render(){
        return(
                <div>
                    {/* using default prop - title */}
                    <h1>This is {this.props.title}'s Website!</h1>
                </div>
            );
    }
}
  
// Creating default props for 
// ExampleClass Component
ExampleClass.defaultProps = {
    title: "GeeksforGeeks"
}
  
ReactDOM.render(
    <ExampleClass />, 
    document.getElementById("root")
);

chevron_right


Output:

You can see in the above program we have created a default prop named title outside of the class ExampleClass and accessed this prop inside of that class using this.props statement.



We can also pass arrays as props, instead of passing single elements. Let’s just see how it is done in the below program:

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
// Component
class ExampleClass extends React.Component{
    render(){
        return(
                <div>
                    {/* accessing array prop directly */}
                    <h1>The names of students are: {this.props.names}</h1>
                </div>
            );
    }
}
  
// Passing an array as prop
ExampleClass.defaultProps = {
    names: ['Ram', 'Shyam', 'Raghav']
}
  
ReactDOM.render(
    <ExampleClass />, 
    document.getElementById("root")
);

chevron_right


In the above program, we have passed an array of names as a prop to the component ExampleClass. We have also accessed this array directly to print the content of the array. Below is the output when the above code is rendered:

You can see in the above output that, printing the content of the array using the this.props statement directly, simply prints all elements in the array without any formatting. But this doesn’t look good right? This is not how we print array elements in other programming languages. What if we want to add some formatting before we print an array element? Or in other words, what if we want to iterate the array passed as props? To do so, we can use the map() method available in JavaScript. We will have to pass a function as an argument to the map method. The function will be accepting two parameters out of which the first one is array item and the second one is the index of the array items. To learn about map() in details please visit this link. Let’s see below code in which we are using map() method to iterate over an array passed as a defaultProp to a component:

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
import ReactDOM from 'react-dom';
  
// Component
class ExampleClass extends React.Component{
    render(){
        return(
                <div>
                    {/* iterating over array using map() */}
                    <h1>{this.props.names.map(
                        function namesIterator(item,i){
                            return (
                                    "Student "+ (i+1) +": " +
                                     item+
                                     ((i!=2)?',  ':'\n')
                                )
                        }
  
                        )}</h1>
                </div>
            );
    }
}
  
// Passing an array as prop
ExampleClass.defaultProps = {
    names: ['Ram', 'Shyam', 'Raghav']
}
  
ReactDOM.render(
    <ExampleClass />, 
    document.getElementById("root")
);

chevron_right


Output:

You can see in the above program how we are iterating over the array passed to the component ExampleClass using map().

That’s all for this article. In our next article, we will see how to validate types in props or how to perform type-checking.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.