When a folder list is visible as shown below in a web application created with React, I would like to rename it by double-clicking on the word "Untitled". Specifically, when I double-click a character, I want to change the element of "Untitled" toso that the name can be changed.

What code should I use to implement such a feature?

The folder icon and the word "Untitled" are combined into onePaperFoldercomponent. This component is defined below.

import React from 'react';
import List from '@ material-ui/core/List';
import ListItem from '@ material-ui/core/ListItem';
import ListItemText from '@ material-ui/core/ListItemText';
import ListItemIcon from '@ material-ui/core/ListItemIcon';
import Folder from '@ material-ui/icons/Folder';
import Menu from '@ material-ui/core/Menu';
import MenuItem from '@ material-ui/core/MenuItem';
import Divider from '@ material-ui/core/Divider';
import {withStyles} from '@ material-ui/core/styles';
class PaperFolder extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      mouseX: null,
      mouseY: null,
    }
    this.handleClick = this.handleClick.bind (this);
    this.handleClose = this.handleClose.bind (this);
  }
  handleClick (event) {
    event.preventDefault ();
    this.setState ({
      mouseX: event.clientX-2,
      mouseY: event.clientY-4,
    })
  }
  handleClose () {
    this.setState ({
      mouseX: null, mouseY: null
    })
  }
  render () {
    const {classes} = this.props;
    return (
      <List className = {classes.folder}>
        <ListItem button className = {classes.folder}>
          <ListItemIcon>
            <Folder />
          </ListItemIcon>
          
            <ListItemText primary = {this.props.name} />
            <Menu
              keepMounted
              open = {this.state.mouseY! == null}
              anchorReference = "anchorPosition"
              anchorPosition = {
                this.state.mouseY! == null&&this.state.mouseX! == null
                ? {top: this.state.mouseY, left: this.state.mouseX}: undefined
              }
            >
              <MenuItem>Rename</MenuItem>
              <MenuItem>Delete</MenuItem>
              
              <MenuItem onClick = {this.handleClose}>Close</MenuItem>
            </Menu>
          
        </ListItem>
      </List>
    )
  }
}
const styles = theme =>({
  folder: {
    paddingBottom: 0,
    paddingTop: 3,
  },
});

export default withStyles (styles) (PaperFolder);

Right-click now to bring up the context menu and click on Rename to try to rename it, but if possible, double-click as above I want to make it changeable.

Thanks for your consideration.