Question

How to use multiple components in React JS

Answer 1

// src/components/counter.jsx

import React, { Component } from "react";

class Counter extends Component {
  state = {
    total: 12
  };

  totalPlus = (e) => {
    console.log(e);
    this.setState({ total: this.state.total + 1 });
  };

  render() {
    return (
      <React.Fragment>
        <span className={this.setStyle()}>
          Render Dynamically With bootstrap.css: {this.getTotal()}
        </span>
        { /* Pass event argument */}
        <button onClick={ () => this.totalPlus({ id: 8364 })} className="btn btn-secondary btn-sm">
          +
        </button>
      </React.Fragment>
    );
  }

  setStyle() {
    let classes = "badge m-2 badge-";
    classes += this.state.total === 0 ? "warning" : "primary";
    return classes;
  }

  getTotal() {
    const { total } = this.state;
    return total === 0 ? "Zero" : total;
  }
}

export default Counter;

// src/components/multiplecounters.jsx

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

class MultipleCounters extends Component {
    state = {  }
    render() { 
        return ( 
            <div>
                <Counter />
                <Counter />
                <Counter />
            </div>
         );
    }
}
 
export default MultipleCounters;

// src/index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import MultipleCounters from './components/multiplecounters'


ReactDOM.render( 
  <MultipleCounters />,
  document.getElementById('root')
);

serviceWorker.unregister();




/*
run:

Render Dynamically With bootstrap.css: 13
Render Dynamically With bootstrap.css: 14
Render Dynamically With bootstrap.css: 15

{id: 8364}
{id: 8364}
{id: 8364}
{id: 8364}
{id: 8364}
{id: 8364}

*/

 

70+ SQL courses for beginners and professionals