ReactJS: How to reset an input field to its initial value

Question

I've got some text that switched to a form with an input field that has text already in it. If i submit the form, the input field switches back to normal text and the value of the input field gets processed. If i click outside the input field, the text should revert back to its initial value as it was when i first clicked the edit button.

One idea i have is to declare an initialValue variable when i start editing the text and if i click outside to set the state of the text to initialValue, but there has to be a better way.

import React, { Component } from "react";

class TodoRow extends Component {
  render() {
    const { id, text, isInEditMode } = this.props.data;

    return (
      <tr>
        <td>
          {isInEditMode ? (
            <form onSubmit={this.handleSubmit}>
              <input
                id={id}
                onBlur={(event) => {
                  this.props.handleEdit(id);
                }}
                placeholder={text}
                value={text}
                onChange={this.props.handleEditInput}
              ></input>
            </form>
          ) : (text)}
        </td>
        <td>
          <button onClick={() => this.props.handleEdit(id)}>
            Edit
          </button>
        </td>
      </tr>
    );
  }
}

export default TodoRow;