Question

How to use component without local state and modify state on other component in React JS

Answer 1

// src/components/multiplecounters.jsx

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

class MultipleCounters extends Component {
  state = {
    counters: [
      { id: 1, cvalue: 3 },
      { id: 2, cvalue: 1 },
      { id: 3, cvalue: 7 }
    ]
  };

  // Handle event - update the state
  deleteCounter = id => {
    const newState = this.state.counters.filter(cr => cr.id !== id);
    this.setState({ counters: newState });
  };

  // Handle Add Value
  addValue = counter => {
    const cloneCounters = [...this.state.counters];
    const index = cloneCounters.indexOf(counter);
    cloneCounters[index].cvalue++;
    this.setState({ cloneCounters });
  };

  render() {
    return (
      <div>
        {this.state.counters.map(mcounter => (
          // Pass data
          <Counter
            key={mcounter.id}
            // Pass reference of the function to child component: Counter
            onDelete={this.deleteCounter}
            onAddValue={this.addValue}
            // Pass state id and cvalue to: Counter
            mcounter={mcounter}
          />
        ))}
      </div>
    );
  }
}

export default MultipleCounters;

 

// src/components/counter.jsx
 
import React, { Component } from "react";
 
class Counter extends Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h5>Counter Number: {this.props.mcounter.id}</h5>
        <span className={this.setStyle()}>
          Render Dynamically With bootstrap.css: {this.getTotal()}
        </span>
        {/* Pass event argument */}
        <button
          onClick={() => this.props.onAddValue(this.props.mcounter)}
          className="btn btn-secondary btn-sm"
        >
          +
        </button>
        {/* Raise event */}
        <button
          onClick={() => this.props.onDelete(this.props.mcounter.id)}
          className="btn btn-danger btn-sm m-2"
        >
          Del
        </button>
      </div>
    );
  }
 
  setStyle() {
    let classes = "badge m-2 badge-";
    classes += this.props.mcounter.cvlaue === 0 ? "warning" : "primary";
    return classes;
  }
 
  getTotal() {
    const { cvalue } = this.props.mcounter;
    return cvalue === 0 ? "Zero" : cvalue;
  }
}
 
export default Counter;

// 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:

Counter Number: 1
Render Dynamically With bootstrap.css: 6
Counter Number: 2
Render Dynamically With bootstrap.css: 4
Counter Number: 3
Render Dynamically With bootstrap.css: 9

*/

 

70+ SQL courses for beginners and professionals