Creating React Components and using Props

Hi there! 👋 Today I am going to create Component using the created element which I created on last time.

Components are functional elements of React. In a component we can add different functionalities to prepare before the render.

We can re-use the components to create beautiful UI in a short time.

Why should we use React Components?

We have used React elements before right? It is a valid JS object and we could use dynamic variables inside the elements as we saw in previous post.

So why do we need React Components?

Let's change our previous element to a component.

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock() {
    return (
        <h1 className="heading" tabIndex={index}>
            <span className="text">Hello {new Date().toLocaleTimeString()}</span>
            <img src="" />
        </h1>
    );
}

root.render(Clock());

We created the Clock component in the above example. This component returns a React element.

• We can render the component using html syntax.

root.render(<Clock />);

• Using React components we can pass the variable as a parameter using the attribute of that component. These parameters are passed as objects.

function Clock({locale}) {
    return (
        <h1 className="heading" tabIndex={index}>
            <span className="text">Hello {new Date().toLocaleTimeString(locale)}</span>
            <img src="" />
        </h1>
    );
}
root.render(<Clock locale="en-US"/>);

• We can make other calculations inside the function and then return the results in Component.

Amazing right! This is like dynamic elements. As React elements can not be dynamic. React introduces the Components. For these dynamic functionalities components are super useful.

Till now we have discussed the functional components. Now, let's learn about the Class component.

But the question is why do we need to use the Class component?

Class component is a stateful component. It means this can be returned to it again and again.

While using a functional component we couldn't find a way to make the component to change by itself, which can return the updated value each time the clock changes other than manually calling it again and again. This can be fixed using a stateful approach.

Now, let's update our functional component to a class component.

class Clock {
  print() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {new Date().toLocaleTimeString()}</span>
        </h1>
      </div>
    );
  }
}

Here we created a Clock class and in that class we created a print method, which returns the element.

But we know that we can not call class. Class is a skeleton of the Object.

So we need to create an object first. Then call the print method from that object.

const ClockComponent = new Clock();
root.render(ClockComponent.print());

But this will not work if we set root.render(<ClockComponent />) like we used for Clock function before. The problem is React isn't understanding our Clock class as a Component.

So, what should be the workaround for this?
By making the class as a React component.

We can extend the Clock class by React Component class to make it a React component.

import React from "react";
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {new Date().toLocaleTimeString()}</span>
        </h1>
      </div>
    );
  }
}

Now we have access to all properties of the Component class. Also it automatically creates an object inside the class.

We can use the render method now which is defined in the React Component class. Also we don't need to define any object to use the Clock class component.

We can just simply render the Clock class component. 🤗

root.render(<Clock />);

We can also pass parameters as attributes.

root.render(<Clock locale="en-US"/>);

Now Clock class can access the attribute using its props property. The React Component class already has the props property.

As our Clock class extends it, it also gets access to the props property. 😁

Now, let's access the locale attribute using props property.

import React from "react";
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {new Date().toLocaleTimeString(this.props.locale)}</span>
        </h1>
      </div>
    );
  }
}

Here, this.props is the object. Here this is the object of the React Component. If we want to get the property inside the class we can call this.

From the above example we get that we can pass props outside and update the component.

We can separate these class components in different files and then we can export the class component.

Let's create a file Clock.jsx. Cut all the Clock component codes to Clock.jsx then export the Clock component.

import React from "react";

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {new Date().toLocaleTimeString(this.props.locale)}</span>
        </h1>
      </div>
    );
  }
}

export default Clock

Then in the main.jsx file let's import the Clock component.

import ReactDOM from 'react-dom/client'
import Clock from './Clock';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock locale="en-US"/>);

That's it! We are done with creating components and exporting them. We can import and use that component in different locations.

From these Component examples we found that components are reusable. We can pass attributes to it and it will return the results.

This is similar to the html tags and attributes. Pretty easy right! 😍🥳

We can also add components inside another component.

Let's update the component tag with a separate closing tag.

<Clock locale="en-US"></Clock>

Now, we can put anything inside the Clock tag.

<Clock locale="en-US">Test children component</Clock>

To show the children properties we have to use the props again. We can find the children properties in this.props.children. Let's add this in our Clock component.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {this.props.children} {new Date().toLocaleTimeString(this.props.locale)}</span>
        </h1>
      </div>
    );
  }
}

Now, we can see the children property in the browser.

We can also put components inside the component.

root.render(<Clock locale="en-US"><Clock locale="en-US"/><Clock locale="en-US"/></Clock>);

The result will be

We have to keep in mind that we should never change props inside the component.

When we change the attribute or child component of the React Component the render function is always called and the elements are reloaded. So if we change the prop that time it will again call the render function. As a result this will create an infinite loop and our application will crash. 😩

Now as we understand Components we can create reusable components and use them multiple times in our application to make a beautiful app.

Here is the github repo of today's exercise.

Thank you for reading. 🙏 I will try to write about the state and lifecycle in the next post. Till then bye 👋🙌