I want to create a simple calculator app in React, which is consisted out of 3 main components: App.js, Buttons.js, and Display.js.

App is the parent for both Display and Buttons. Display is above the Buttons, and according to the button click, Display's state should change. I'm passing the onClick function as prop to the Buttons, and even though the App's state changes, Display components doesn't re-render. 

I will paste my code and due simplicity, remove most of the logic and leave only one button('1'). So, the press on that button should display '1'. Code:

App.js:

```
import React, { Component } from 'react';
import './App.css';
import Buttons from './components/Buttons';
import Display from './components/Display';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      display: "0"
    }
  }

  handleClick = e => {
    this.setState({ display: e.target.value });
  }

  render() {
    return (
      <div className="container border border-success main-div">
        <Display display={this.state.display}/>
        <Buttons handleClick={this.handleClick} />
      </div>
    );
  }
}

export default App;

```

Display.js:

```
import React, { Component } from 'react';

class Display extends Component {
    constructor(props) {
        super(props);

        this.state = {
            display: "0"
        }
    }

    componentDidMount = () => {
        this.setState({ display: this.props.display })
    }

    render() {
        return (
            <div className="row border border-success">
                <div className="col">
                    {this.state.display}
                </div>
            </div>
        );
    }
}

export default Display;

```

Buttons.js:

```
import React, { Component } from 'react';

class Buttons extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="row">
                <div className="col-sm border border-success">
                    <div className="calc-button" data-value="1" onClick={this.props.handleClick}>1</div>
                </div>
            </div>
        );
    }
}

export default Buttons;

```

What am I doing wrong? What's the other way of implementing this if this one isn't right?