ReactJS | Nested Components

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about Nested Components in ReactJS.

As we learned in our previous tutorial, React component is the building block of a React application. A ReactJS component is made up of multiple individual components. React let multiple components to be combined for creation of larger components. Also React components can be nested to any arbitrary level. Let's see how React components can be composed in this tutorial.

FormattedMoney Component

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

Open our expense-manager application in your favorite editor.

Next, create a FormattedMoney.js file in the src/component folder and import the React library.

import React from 'react';

Next, create a class by simply extending the React.Component.

class FormattedMoney extends React.Component { 
}

Next, introduce a construction function with argument props as shown below -

constructor(props) { 
   super(props); 
}

Next, create a method format to format the amount.

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

Next, create a method render to display 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.

Next, you have to specify the component as default export class.

export default FormattedMoney;

Now, we've successfully created our React FormattedMoney 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;

READ: ReactJS | Create a Component Using Properties

FormattedDate Component

We are going to create another component, FormattedDate to format and show the date and time of the expense.

Open our expense-manager application in your favorite editor.

Next, create a file, FormattedDate.js in the src/component folder.

Next, import React library.

import React from 'react';

Next, create a class by simply extending the React.Component.

class FormattedDate extends React.Component { 
}

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

constructor(props) { 
   super(props); 
}

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;
}

Next, create a method render to display 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.

Next, you have to specify the component as default export class.

export default FormattedDate;

Now, we've successfully created our React FormattedDate 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;

READ: ReactJS | Properties (props)

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be studying about ReactJS Use Component.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.