React component examples.

App.jsx

import React, {Component} from 'react';
import './App.css';
import CounterList from "./CounterList";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counters: []
        }

        this.addCounter = this.addCounter.bind(this);
    }


    addCounter() {
        const { counters } = this.state;
        let k = Math.random() * 11;
        counters.push({id: k, value: 0})
        this.setState( { counters: counters })
    }

    render() {
        const { counters } = this.state;
        return (
            <div className="App">
                <header className="App-header">
                    <h1>Super Duper Counters</h1>
                </header>
                <button onClick={ this.addCounter }>Create Counter</button>
                <CounterList counters={ counters }/>
            </div>
        );
    }
}

export default App;

Counter.jsx

import React from "react";

export default class Counter extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            value: 0,
        }
        this.increment = this.increment.bind(this);
        this.decrement = this.decrement.bind(this);
    }

    increment() {
        this.setState(prev => ({ value: prev.value + 1 }))
    }

    decrement() {
        this.setState(prev => ({ value: prev.value - 1 }))
    }

    render() {
        const counterValue = this.state.value;
        return <div>
            <h3>Counter</h3>
            { counterValue }
            <button onClick={ this.increment }>+</button>
            <button onClick={ this.decrement } disabled={ counterValue <= 0}>-</button>
        </div>
    }
}

CounterList.jsx

import React from "react";

export default class CounterList extends React.Component {
    constructor(props) {
        super(props);
        this.counters = props.counters;
        this.createElements = this.createElements.bind(this);
    }

    createElements () {
        return this.counters.map(counter => {
            return <Counter key={counter.id} value={counter.value} />
        })
    }

    render() {
        const counterElements = this.createElements();

        return (
            <div>
                { counterElements }
            </div>
        )
    }
}