---
description: >-
  Embryo-ReactJS provides you the ability to add new widgets in the template.
  Please check the detailed documentation to learn, how to add the new widgets
  in the template.
---

# Adding New Widgets

### Adding a new widget

Please follow the given steps to add a new widget in the template. We are taking an example of adding a "Blog Section" on the "Home Page Two" but you can add any widget on any of the pages in the template:

**Step 1:** Go to `src->routes->home-two` & open the `index.js` file and add the widget in the file like below. You can also add some styling to it, for this you can take the reference from other pages.

```
{/ blog grid section start /}
                     < div className="section-pad pt-0" >
                        <div className="container">
                           // Add some basic styling here
                           <BlogGrid /> // Added Blog Grid Widget
                        </div>
                     </div >
```

and import the widget at the top of the file like other import statements:

```
import BlogGrid from '../../components/widgets/BlogGrid3';
```

**Step 2:** Now you have to define a new state. This state is used to pass the data to the grid.

```
constructor(props) {
      super(props);
      this.state = {
        ...
         blogs: null // New State Defined
      }
   }
```

**Step 3:** Now you have to create a function to fetch the data from your database (in our case we are fetching the data from firebase) and pass it to the state defined in above step.

```
 //get blogs data
   getblogs() {
      const blogsRef = firebase.database().ref('blogs');
      blogsRef.on('value', (snapshot) => {
         let blogs = snapshot.val();
         this.setState({
            blogs: blogs // Set the state
         });
      });
   }
```

We need to import the firebase in our case.

```
// firebase
import firebase from '../../firebase';
import 'firebase/database';
```

**Step 4:** Call this function in the `componentDidMount()` method.

```
componentDidMount() {
     ...
      this.getblogs();
   }
```

**Step 5:** You have to conditionalise the return statement so that it will only return when your state have some data to show on the blog grid.

```
return (
         <Fragment>
            {
               ... && this.state.blogs !== null ?
                  <div className="iron-home-v2-wrap">
                     ...
                     <BlogGrid blogItems={this.state.blogs} />
```

Once you have completed the above steps, you can now check the newly added widget on your Home Two Page like below:

![](https://155188374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNs6RvaAolHRJ3mnLo4%2F-Lb1taYQlrorlOVTybqw%2F-Lb25VamdxAJvib2bZq9%2FSelection_058.png?alt=media\&token=6d0177cc-4080-495b-b11e-f0df90bbc540)
