I believe this article may shed some light on your issue: Lifting State Up - React Docs. I wouldn't suggest trying to update the state of Component #1 from inside Component #2. Take the increment logic from your Increment Component and make it a method on your Parent Component. Then pass the method as a prop on the Increment Component.

In Timer.js

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

class Timer extends Component {
  // The Constructor is necessary for adding the handleIncrement method
  // State should be initialized here as well.
  constructor(props) {
    // super(props) is required on class based component constructors
    super(props);
    this.state = { count: 0 };
    this.handleIncrement = this.handleIncrement.bind(this);
  }

  // This is the method
  handleIncrement() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div className="top">
        <span className="display">{this.state.count}</span>
        {/* handleIncrement is the name of the prop that will be referenced inside
        the Increment.js Component. */}
        {/* this.handleIncrement is the method. */}
        <Increment handleIncrement={this.handleIncrement} />
      </div>
    );
  }
}

export default Timer;

In Increment.js

import React from "react";

// Putting (props) means this component is expecting a prop when
// its been imported and used as <Increment propGoesHere={value} /> in Timer.js
const Increment = (props) => {
  return (
    <button className="btn btn-primary" onClick={props.handleIncrement}>
      +
    </button>
  );
};

export default Increment;

As an aside, Class based components can be avoided altogether (because who wants to deal with the "this" keyword, constructors, and binding every method) by using the useState hook.

It would look something like: In Timer.js

import React, { useState } from "react";

const Timer = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };
  return (
    <div className="top">
      <span className="display">{count}</span>
      <button className="btn btn-primary" onClick={handleIncrement}>
        +
      </button>
    </div>
  );
};

export default Timer;

• No need for a class to hold the state anymore, now any component can house state!
• No more constructor, no need to bind methods, no more "this" keyword!
• No need for the entire Incremement child Component

First of all

<button className="btn btn-primary"  onClick={<Increment  />} >
  +
</button>

This specific piece of code is impossible to make work. You cannot pass a component as a function to an onClick. Since I do not know the practical application of your question I have no clue what is exactly you are trying to achieve so here is just an option of how to make these specific components work.

import React from "react";
import Increment from "../components/Increment";

class Timer extends React.Component {
  //State
  state = {
    count: 0,
    mountCounter: false,
  };

  increaseCount = () => {
    this.setState({ count: this.state.count + 1, mountCounter: false });
  };

  render() {
    return (
      <div className="top">
        <span className="display">{this.state.count}</span>
        <button
          className="btn btn-primary"
          onClick={() => this.setState({ mountCounter: true })}
        >
          +
          {this.state.mountCounter && (
            <Increment increaseCount={() => this.increaseCount()} />
          )}
        </button>
      </div>
    );
  }
}
export default Timer;

import React, { Component } from "react";

class Increment extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.props.increaseCount();
  }
  render() {
    return null;
  }
}
export default Increment;