Добавление счетчика для отображения количества нажатий кнопки в теге p

Question

Итак, в общем, мне нужно создать тег ap над моим вводом, который говорит «Количество раз, когда кнопки увеличения / уменьшения были prssed:» и перечисляет число.Я написал все, кроме этого, потому что я не знаю, как добавить это в свой код и мне нужна помощь от вас, ребята.Я включу мои файлы, начиная с моего App.js

import React from 'react';
import Counter from './Counter';
import { connect } from 'react-redux';
import { increment, decrement, reset, inputNumber, inputNumberChange } from '../actions/index';

class App extends React.Component {
  render() {
    return (
      <div>
        <h3>Counter</h3>
        <Counter count={this.props.count} onIncrement={this.props.onIncrement} onDecrement={this.props.onDecrement} onReset={this.props.onReset}
        onInputNumber={this.props.onInputNumber} onInputNumberChange={this.props.onInputNumberChange} />
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onIncrement: () => dispatch(increment()),
    onDecrement: () => dispatch(decrement()),
    onReset: () => dispatch(reset()),
    onInputNumber: () => dispatch(inputNumber()),
    onInputNumberChange: (number) => dispatch(inputNumberChange(number))
  };
}
function mapStateToProps(state) {
    return {
      count: state.count,
      numberInputted: state.numberInputted
    };
  }

export default connect(mapStateToProps, mapDispatchToProps)(App);

Вот следующий документ index.js

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './components/App';
import reducer from './reducers/counter';

const store = createStore(
  reducer,
  undefined,
  window.devToolsExtension ? window.devToolsExtension() : f => f
);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Мой следующий документ index.js в / actions

export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

export const reset = () => ({
  type: 'RESET'
});

export const inputNumber = () => ({
  type: 'INPUT_NUMBER'
});

export const inputNumberChange = (number) => ({
  type: 'INPUT_NUMBER_CHANGE',
  number
});

следующий документ counter.js

const initialState = {
  count: 0,
  numberInputted: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    case 'RESET':
      return {
        ...state,
        count: (state.count = 0)
      };
    case 'INPUT_NUMBER':
      return {
        ...state,
        count: parseInt(state.numberInputted),
        numberInputted: null
      };
    case 'INPUT_NUMBER_CHANGE':
      return {
        ...state,
        numberInputted: action.number
      }
    default:
      return state;
  }
}

export default counterReducer;

следующий документ Counter.js

import React from 'react';

const Counter = ({ count, onDecrement, onIncrement, onReset, onInputNumberChange, numberInputted, onInputNumber }) => {

    return (
      <div>
        <div>
          <button onClick={onDecrement}>-</button>
          <span>{count}</span>
          <button onClick={onIncrement}>+</button>
          <br />
          <button onClick={onReset}>Reset</button>
          <br />
          <input type='text' onChange={event => onInputNumberChange(event.target.value)} value={numberInputted} />
          <button onClick={onInputNumber}>Change Count</button>
        </div>
      </div>
    );
}


export default Counter;

Я прошу прощения за длину моего кода, но мы должны соблюдать определенную суммуруководящих принципов, включая количество компонентов, которые мы можем использовать, и тому подобное.Все, что мне не хватает, - это мой счетчик количества нажатий кнопок увеличения / уменьшения.