Ever since I revamped my site, I felt something was missing. I couldn’t point a finger on it. With this in mind, I started my day by making some new changes to my site. The one, in particular, was my homepage content. In terms of what I did in React, I would say I have somewhat cleared my concepts on composing components and props. 🙌

😎 Today, I started a new section of Mastering React. This section is based on how to compose multiple components. And then how to use them to make efficient React applications. It is further  divided into the following subtopics:

  • Pass Data
  • Raise and Handle Events
  • Multiple Components in Sync
  • Functional Components
  • Lifecycle Hook

I have completed the first two topics today, i.e., Pass Data and Raise and Handle Events. Raising and handling events from composed components can be tricky. But once you have understood how they work, it becomes easy. 💯

🚧 Composing components

I first learned how to compose components in the React before moving on to the above-said subtopics. It took me a couple of minutes before I get the hang of it. Now I will explain this to you, so you will also know what I am talking about here. 🤞

Let’s say you have created a React component — Counter. The Counter component includes an increment button. The increment when pressed increments the number in front of it by 1.  Now you want to create, let’s say four more Counters. What would you do!? Let me show you first how it can be done. And then I’ll explain.

 

import React, { Component } from "react";
import Counter from "./counterComponent";

class MultipleCounters extends Component {

      state = {};
     render(){
          return(
              <React.Fragment>
                  <Counter/>
                  <Counter/>
                  <Counter/>
                  <Counter/>
                  <Counter/>
              </React.Fragment>
          );
     }
}

export default MultipleCounters;

 

🧐 So what I have done is that I created a new JSX file and within it a component ⁠— MultipleCounters. I then imported the Counter component in this JSX file and used it multiple times like HTML tags in the render method. This is composing components. After that, in index.js file, I can import the MultipleCounter component and render it to display on the website. Simple! 🥂

👩‍💻 Passing data through the component

We use props when we need to pass data through a component. Props are used to access the attributes we give to the child component inside the child component itself. For instance,

<Counter id={this.state.id} value={this.state.value} />

Here value and id are then accessed by props in the Counter component. You can also dynamically change values inside the Counter component via props. For example,

class Counter extends Component {
  state = {
    value: this.props.value
  };

  render() {
    return ();
  }
}

This value property inside the state method is using props for getting the value from outside.

🚀 Raising and handling events

It is quite an easy topic but it gets tricky when we use it in composed components. You use props in the child component to activate a function written in the parent component via event handlers. Puff! Although I get a hold of it by spending on it most of my time still I don’t think I can explain this any further.

Cheerios 🤞