App.js

import React from 'react';
import EditableContainer from './EditableContainer';

const App = () => {
  const handleSingleTap(text){
    //carry out what ever we want to do with the text.
  }
  const handleDoubleTap(text){
    //carry out what ever we want to do with the text.
  }
  return(
    <div>
      <EditableContainer
        doubleClick={false}
        handleEnter={handleSingleTap}
        className='What-Ever-Classname'>
        Single tap to edit me!!
      </EditableContainer>    
      <EditableContainer
        doubleClick={true}
        handleEnter={handleDoubleTap}
        className='What-Ever-Classname'>
        Double tap to edit me!!
      </EditableContainer>
    </div>
  ) 
}

export default App

EditableContainer.js

import React from 'react';
//import settings from '../settings.js'
import Field from './FieldStyle';

export default class EditableContainer extends React.Component {
  constructor (props) {
    super(props);
    // init counter
    this.count = 0;

    // init state
    this.state = {
      edit: false,
      value: ''
    }
  }
  static getDerivedStateFromProps(props, state){
      //console.log(props.lists);
    if(props.edit){
      return { edit: props.edit };
    }
    return null;
  }

  componentWillUnmount () {
    // cancel click callback
    if (this.timeout) clearTimeout(this.timeout);
  }

  handleDoubleClick (e) {
    // cancel previous callback
    if (this.timeout) clearTimeout(this.timeout);

    // increment count
    this.count++;
  
    // schedule new callback  [timeBetweenClicks] ms after last click
    this.timeout = setTimeout(() => {
      // listen for double clicks
      if (this.count === 2) {
        // turn on edit mode
        this.setState({
          edit: true,
          value: e.target.textContent
        })
      }

      // reset count
      this.count = 0
    }, 250) // 250 ms
    //}, settings.timeBetweenClicks) // 250 ms
  }

  handleSingleClick (e) {
    this.setState({
      edit: true,
    });
  }

  handleBlur (e) {
    // handle saving here
    
    // close edit mode
    this.setState({
      edit: false,
      value: e.target.value
    });
  }
  handleEnter(e){
    if(e.code === "Enter" || e.charCode === 13 || e.which === 13){
      this.props.handleEnter(e.target.value);

      this.setState({
        edit: false,
        value: ''
      });
    }
  }

  render () {
    const {doubleClick, handleEnter, children, ...rest} = this.props;
    const {edit, value} = this.state;
    if (edit) {
      // edit mode
      return (
        <Field
          autoFocus
          defaultValue={value}
          onBlur={this.handleBlur.bind(this)}
          onKeyPress={this.handleEnter.bind(this)}
        />
      )
    } else {
      // view mode
      if(doubleClick){
        return (
          <p
            onClick={this.handleDoubleClick.bind(this)}
            {...rest}
          >
            {children}
          </p>
        )
      }else{
        return (
          <p
            onClick={this.handleSingleClick.bind(this)}
            {...rest}
          >
            {children}
          </p>
        )        
      }
    }
  }
}

FieldStyle.js

import React from 'react'

export default class FieldStyle extends React.Component {
  componentDidMount () {
    this.ref && this.ref.focus()
  }

  render () {
    const {autoFocus, ...rest} = this.props

    // auto focus
    const ref = autoFocus ? (ref) => { this.ref = ref } : null
    return (
      <input
        ref={ref}
        type="text"
        {...rest}
      />
    )
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'))