A React simple app example: create reusable components

Here’s a very simple example of a counter in React.

This code creates a reusable Button component. Once you click a button, its declared value increments the state of the counter state property of the App component.

The Result component displays the current value of the App counter state.

Output

Code

import React, { Component } from "react";

class Button extends React.Component {
  handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue);
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        +{this.props.incrementValue}
      </button>
    );
  }
}

const Result = props => {
  return (
    <div>
      {props.counter}
    </div>
  );
};

class App extends React.Component {
  state = { counter: 0 };

  incrementCounter = incrementValue => {
    this.setState(prevstate => ({
      counter: prevstate.counter + incrementValue
    }));
  };

  render() {
    return (
      <div>
        <Button incrementValue={1} onClickFunction={this.incrementCounter} />
        <Button incrementValue={10} onClickFunction={this.incrementCounter} />
        <Button incrementValue={100} onClickFunction={this.incrementCounter} />
        <Button incrementValue={1000} onClickFunction={this.incrementCounter} />
        <Result counter={this.state.counter} />
      </div>
    );
  }
}

export default App;