Stateless function components cannot have refs. https://muhammadghazali.wordpress.com/2018/07/11/stateless-function-components-cannot-have-refs/

App-1.js

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      input1: ""
    };

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

  handleChange() {
    this.setState({ input1: this.refs.input1.value });
  }

  render() {
    return (
      <div>
        <h1>{this.state.text}</h1>
        <InputWidget update={this.handleChange} />{" "}
        <span>{this.state.input1}</span>
      </div>
    );
  }
}

const InputWidget = props => (
  <input ref="input" onDoubleClick={props.update} onChange={props.update} />
);

export default App;

App-2.js

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      input1: "",
      input2: ""
    };

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

  handleChange() {
    this.setState({
      input1: this.input1.refs.input.value,
      input2: this.input2.refs.input.value
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.text}</h1>
        <InputWidget
          ref={component => (this.input1 = component)}
          update={this.handleChange}
        />{" "}
        <span>{this.state.input1}</span>
        <InputWidget
          ref={component => (this.input2 = component)}
          update={this.handleChange}
        />{" "}
        <span>{this.state.input2}</span>
      </div>
    );
  }
}

class InputWidget extends Component {
  render() {
    return (
      <input
        ref="input"
        onDoubleClick={this.props.update}
        onChange={this.props.update}
      />
    );
  }
}

export default App;