child_component_text_toggle.js

import React, { useState, useRef,useEffect } from 'react';

const EditableInput = ({
  onChange,
  text,
  placeholder,
}) => {
  const inputRef = useRef(null);
  const [inputVisible, setInputVisible] = useState(false);

  function onClickOutSide(e) {
    if (inputRef.current && inputRef.current.contains(e.target)) {
      setInputVisible(false);
    };
  }

  useEffect(() => {
    if (inputVisible) {
      document.addEventListener('mousedown', onClickOutSide);
    }
    return () => {
      document.removeEventListener('mousedown',onClickOutSide)
    }
  });

   return (
    <React.Fragment>
      {
        inputVisible ?
          (<input ref={inputRef} value={text} placeholder={placeholder} onChange={onChange} />)
        :
          (<span onClick={() => setInputVisible(true)}>{text}</span>)
      }
    </React.Fragment>
   );
};

export default EditableInput;