So, before using material UI, my code was like this. To implement edit feature for ToDo app I used ref from textarea for get current (default) value in there, and then save updated value in save () method (don't worry about editItem method, it is in another ponent, and I believe there is no need to post him, because the problem is not there)

import React, {Component} from 'react';
import './ToDoItem.css';
import EditButton from './EditButton';
import DeleteButton from './DeleteButton';
import SaveButton from './SaveButton';
import EditToDoField from './EditToDoField';

class ToDoItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editMode: false,
        }
      };

      edit = () => {
        this.setState ({editMode: true});
      };

      save = () => {
        let updToDo = this.refs.newToDo.value;
        this.props.editItem (updToDo);

        this.setState ({
          editMode: false})
      };

      renderNormal = () => {
        return (
            <div className="ToDoItem">
            <p className="ToDoItem-Text">{this.props.todo}</p>
            <EditButton editHandler={this.edit} />
        </div>
        );
      };

      renderEdit = () => {
        return (
          <div className="ToDoItem">
            <textarea ref="newToDo" defaultValue={this.props.todo}></textarea>
            <SaveButton saveHandler={this.save} /> 
          </div>
        );
      };

      render() {
        if (this.state.editMode) {
          return this.renderEdit ();
        } else {
          return this.renderNormal ();
        }
      }
}

export default ToDoItem;

So, now I trying to implement beautiful TextField from material UI, texarea tag was deleted and here is the respective additions to code:

<EditToDoField 
                ref="newToDo"
                defaultToDoValue={this.props.todo} 
            />

and EditToDoField ponent:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: "61px",
  },
});

class OutlinedTextFields extends React.Component {

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-editToDO"
          label="Edit ToDo"
          defaultValue={this.props.defaultToDoValue}
          className={classes.textField}
          multiline
          margin="normal"
          variant="outlined"
        />
      </form>
    );
  }
}

OutlinedTextFields.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(OutlinedTextFields);

So I pass current (default) value to EditToDoField, but when I'm trying to save updated ToDo text, I got empty field in result. I understand that most probably I just missed something, but still don't get what. I also tried to use "innerRef" and "inputRef" instead of "ref", but no luck. Can you please help me with this stuff ?

So, before using material UI, my code was like this. To implement edit feature for ToDo app I used ref from textarea for get current (default) value in there, and then save updated value in save () method (don't worry about editItem method, it is in another ponent, and I believe there is no need to post him, because the problem is not there)

import React, {Component} from 'react';
import './ToDoItem.css';
import EditButton from './EditButton';
import DeleteButton from './DeleteButton';
import SaveButton from './SaveButton';
import EditToDoField from './EditToDoField';

class ToDoItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editMode: false,
        }
      };

      edit = () => {
        this.setState ({editMode: true});
      };

      save = () => {
        let updToDo = this.refs.newToDo.value;
        this.props.editItem (updToDo);

        this.setState ({
          editMode: false})
      };

      renderNormal = () => {
        return (
            <div className="ToDoItem">
            <p className="ToDoItem-Text">{this.props.todo}</p>
            <EditButton editHandler={this.edit} />
        </div>
        );
      };

      renderEdit = () => {
        return (
          <div className="ToDoItem">
            <textarea ref="newToDo" defaultValue={this.props.todo}></textarea>
            <SaveButton saveHandler={this.save} /> 
          </div>
        );
      };

      render() {
        if (this.state.editMode) {
          return this.renderEdit ();
        } else {
          return this.renderNormal ();
        }
      }
}

export default ToDoItem;

So, now I trying to implement beautiful TextField from material UI, texarea tag was deleted and here is the respective additions to code:

<EditToDoField 
                ref="newToDo"
                defaultToDoValue={this.props.todo} 
            />

and EditToDoField ponent:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: "61px",
  },
});

class OutlinedTextFields extends React.Component {

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-editToDO"
          label="Edit ToDo"
          defaultValue={this.props.defaultToDoValue}
          className={classes.textField}
          multiline
          margin="normal"
          variant="outlined"
        />
      </form>
    );
  }
}

OutlinedTextFields.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(OutlinedTextFields);

So I pass current (default) value to EditToDoField, but when I'm trying to save updated ToDo text, I got empty field in result. I understand that most probably I just missed something, but still don't get what. I also tried to use "innerRef" and "inputRef" instead of "ref", but no luck. Can you please help me with this stuff ?

• javascript
• reactjs

• Any luck with my answer? – Paul McLoughlin Commented Sep 29, 2018 at 18:35
• Input works, values from console.log appears as it should, but I still have empty field after saving edited input ... – Wonderio619 Commented Sep 29, 2018 at 18:59
• See my updated answer. – Paul McLoughlin Commented Sep 29, 2018 at 19:12
• It seems to work, according to console, but I still don't understand how to implement it inside my exact code. I must continue after some sleep ... – Wonderio619 Commented Sep 29, 2018 at 19:50

1 Answer 1

Add a simple event handler when the user enters text, you can then use a callback to move the input from the text field to whatever ponent you want, here's the full example

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: '61px'
  }
});

class OutlinedTextFields extends React.Component {
  handleOnChange = event => {
    console.log('Click');
    console.log(event.target.value);
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-editToDO"
          label="Edit ToDo"
          defaultValue={this.props.defaultToDoValue}
          className={classes.textField}
          multiline
          margin="normal"
          variant="outlined"
          onChange={this.handleOnChange}
        />
      </form>
    );
  }
}

OutlinedTextFields.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(OutlinedTextFields);