Write a component which return dynamic tabs in React JS

Components are the building blocks of React applications and they are dynamic too, meaning we can describe a template of HTML and fill in variable data in them.

For example, we have created three components below:

1. BlogContent - contains the content of the blog post
2. Comment - contains user comment
3. BlogPost - the top level React component which will be responsible for rendering both BlogContent and Comment

See how we can describe variables in component's render() method

create file ComponentClasses.js in src folder

export class BlogContent extends React.Component {
  render() {
    return <div>{this.props.articleText}</div>;
  }
}

Here we are telling React to place the property articleText represents within the <div>. Now so where does this.props.articleText come from?

React allows us to pass units of information from parent component down to a child component. We call these props(WE HAVE SEEN THIS A LOT IN OUR COURSE).

See how we can pass information from BlogPost down to its child BlogContent:

class BlogPost extends React.Component {
  render() {
    return (
      <div>
        <BlogContent
          articleText={
            "Information from BlogPost down to its child BlogContent(This is JSX)"
          }
        />
      </div>
    );
  }
}

Here we see the BlogPost component and inside of it, we refer to the BlogContent component. We created a prop for BlogContent called articleText.

We still need a Comment component which we can use to show comment in a BlogPost. The Comment component would look something like:

In the same file, ComponentClasses.js in src folder:

export class Comment extends React.Component {
  render() {
    return <div>{this.props.commentText}</div>;
  }
}

Lets use multiple Comment components.

class BlogPost extends React.Component {
  render() {
    return (
      <div>
        <BlogContent
          articleText={
            "Information from BlogPost down to its child BlogContent(This is JSX)"
          }
        />
        <Comment />
        <Comment />
        <Comment />
      </div>
    );
  }
}

or we can do sth like this:

class BlogPost extends React.Component {
  render() {
    return (
      <div>
        <BlogContent
          articleText={
            "Information from BlogPost down to its child BlogContent(This is JSX)"
          }
        />
        <Comment commentText={"ABC"} />
        <Comment commentText={"XYZ"} />
        <Comment
          commentText={
            "PQR"
          }
        />
      </div>
    );
  }
}

Here we are only passing information from a parent component to many child components. Specifically, we are doing this by creating a prop called commentText to pass to each Comment component, which is then accessible in each instance of Comment as this.props.commentText. Let's expand the HTML that this would ultimately render:

<div>
<div>Information from BlogPost down to its child BlogContent(This is JSX)</div>
<div>ABC</div>
<div>XYZ</div>
<div>PQR</div>
</div>

In nutshell, we should remember:

HTML elements are the basic building blocks of a website(for example, a <div>).
A React application usually consists of several React components combined together.

Unlike simple HTML elements, React components are smarter and bigger. They allow you to do much more and incorporate logic into how content displays.

React components:

are modular, reusable, and enable a 'templating' like functionality
help us organize our user interface's logic and presentation
enable us to think about each piece in isolation, enabling us to apply structure to complex programs.

Final Code:

src/ComponentClasses.js

import React from "react";

export class BlogContent extends React.Component {
  render() {
    return <div>{this.props.articleText}</div>;
  }
}

export class Comment extends React.Component {
  render() {
    return <div>{this.props.commentText}</div>;
  }
}

export class BlogPost extends React.Component {
  render() {
    return (
      <div>
        <BlogContent
          articleText={
            "Information from BlogPost down to its child BlogContent(This is JSX)"
          }
        />
        <Comment commentText={"ABC - user comment 1"} />
        <Comment commentText={"XYZ - user comment 2"} />
        <Comment commentText={"MNO - user comment 3"} />
      </div>
    );
  }
}

and in index.js

import React from "react";
import ReactDOM from "react-dom";

import { BlogPost } from "./ComponentClasses.js";

ReactDOM.render(<BlogPost />, document.getElementById("root"));