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}>
            <Folder />
            <ListItemText primary = {this.props.name} />
              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 onClick = {this.handleClose}>Close</MenuItem>
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.

  • Answer # 1

    I think that the problem can be solved by storing the DOM for each state in a variable and branching the DOM displayed by the value of Props or State.

    For example

    onClickButton () {
        this.setState ({isEdit: true});
    render () {
      const textElement =;
      const labelElement = (

    And when you click the button, the code becomes that the button becomes a text entry field.
    (Because it is not actually moved code, don't hurt ...)

Related articles