ReactJS - Nested Components

A nested component in React is a component that is related to an another component. You can also consider it as a child component inside a parent component; but they are not linked together using the inheritance concept but with the composition concept. Therefore, all the components are nested together in order to create a bigger component rather than a smaller component inheriting from the parent component.

The React component is a building block of a React application. A React component is made up of the multiple individual components. React allows multiple components to be combined to create larger components. Also, React components can be nested to any arbitrary level.

Nested components will make your code more efficient and structured. However, if the components are not nested or assembled properly, there is chance your code can become more complex resulting in lower efficiency. Let us see how React components can be composed properly in this chapter.

FormattedMoney component

Let us create a component, FormattedMoney to format the amount to two decimal places before rendering.

Step 1 − Open our expense-manager application in your favourite editor.

Create a file named FormattedMoney.js in the src/components folder and, Import React library.

import React from 'react';

Step 2 − Then create a class, FormattedMoney by extending React.Component.

class FormattedMoney extends React.Component { 
}

Next, introduce construction function with argument props as shown below −

constructor(props) { 
   super(props); 
}

Create a method format() to format the amount.

format(amount) { 
   return parseFloat(amount).toFixed(2) 
}

Create another method render() to emit the formatted amount.

render() {
   return (
      <span>{this.format(this.props.value)}</span> 
   ); 
}

Here, we have used the format method by passing value attribute through this.props.

Step 3 − Next, specify the component as default export class.

export default FormattedMoney;

Now, we have successfully created our FormattedMoney React component.

import React from 'react';

class FormattedMoney extends React.Component {
   constructor(props) {
      super(props)
   }
   format(amount) {
      return parseFloat(amount).toFixed(2)
   }
   render() {
      return (
         <span>{this.format(this.props.value)}</span>
      );
   }
}
export default FormattedMoney;

FormattedDate Component

Let us create another component, FormattedDate to format and show the date and time of the expense.

Step 1 − Open our expense-manager application in your favorite editor.

Create a file, FormattedDate.js in the src/components folder and import React library.

import React from 'react';

Step 2 − Next, create a class by extending React.Component.

class FormattedDate extends React.Component { 
}

Then introduce construction function with argument props as shown below −

constructor(props) { 
   super(props); 
}

Step 3 − Next, create a method format() to format the date.

format(val) {
   const months = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
   let parsed_date = new Date(Date.parse(val));
   let formatted_date = parsed_date.getDate() + 
      "-" + months[parsed_date.getMonth()] + 
      "-" + parsed_date.getFullYear()
   return formatted_date;
}

Create another method render() to emit the formatted date.

render() { return ( <span>{this.format(this.props.value)}</span> ); }

Here, we have used the format method by passing value attribute through this.props.

Step 4 − Next, specify the component as default export class.

export default FormattedDate;

Now, we have successfully created our FormattedDate React component. The complete code is as follows −

import React from 'react';
class FormattedDate extends React.Component {
   constructor(props) {
      super(props)
   }
   format(val) {
      const months = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
      let parsed_date = new Date(Date.parse(val));
      let formatted_date = parsed_date.getDate() + 
         "-" + months[parsed_date.getMonth()] + 
         "-" + parsed_date.getFullYear()
      return formatted_date;
   }
   render() {
      return (
         <span>{this.format(this.props.value)}</span>
      );
   }
}
export default FormattedDate;
Advertisements