How I can access the cancellation handler from creating a new row in material-table for reactJS?

Question

// index.js
import React, { Component } from "react";
import MaterialTable, { MTableEditRow } from "material-table";
import axios from "axios";

import DataModel from "./DataModel";
import TitleInput from "./TitleInput";

class Report extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      workOrderOptions: [],
      newEntry: {
        userId: "",
        id: "",
        title: "",
        body: ""
      }
    };
    this.handleNewTitle = this.handleNewTitle.bind(this);
    this.cancelAdd = this.cancelAdd.bind(this);
  }

  renderData() {
    const URL = "https://jsonplaceholder.typicode.com/posts";
    axios
      .get(URL)
      .then(response => {
        this.setState({
          data: response.data
        });
      })
      .catch(error => {
        console.log("ERROR:", error);
      });
  }

  // I want to fire this method upon canceling the "add row"
  cancelAdd() {
    this.setState({
      newEntry: {
        userId: "",
        id: "",
        title: "",
        body: ""
      }
    });
  }

  handleNewTitle(title) {
    this.setState({
      newEntry: {
        // ...this.state.newEntry.title,
        title: title
      }
    });
  }

  componentDidMount() {
    this.renderData();
  }

  render() {
    const columns = [
      {
        title: "ID",
        field: "id",
        editable: "never"
      },
      {
        title: "User ID",
        field: "userId",
        editable: "never"
      },
      {
        title: "Title",
        field: "title",
        editable: "never"
      },
      {
        title: "Body",
        field: "body",
        editable: "never"
      }
    ];

    if (this.state.data) {
      return (
        <div>
          <MaterialTable
            components={{
              EditRow: props => {
                return (
                  <div>
                    <TitleInput
                      value={this.state.newEntry.title}
                      title={this.handleNewTitle}
                    />
                    {/* <BodyInput
                            value={this.state.newEntry.body}
                            body={this.handleNewBody}
                            />, <UserIDInput />, etc... */}
                    <MTableEditRow
                      {...props}
                      data={this.state.newEntry}
                      // Is there a handleCancelAction (or something ma something)?                    
                  </div>
                );
              }
            }}
            editable={{
              // Just a sample add
              onRowAdd: newData =>
                new Promise((resolve, reject) => {
                  const result = {
                    id: 15465,
                    userId: 87946542,
                    title: this.state.newEntry.title,
                    body: "Old man Santiago"
                  };
                  console.log(result);
                  const data = this.state.data;
                  data.push(result);
                  this.setState({
                    ...this.state
                  });
                  resolve();
                })
            }}
            data={this.state.data}
            columns={columns}
            title={"Title"}
          />
        </div>
      );
    } else if (!this.state.data) {
      return <div>Loading...</div>;
    }
  }
}

export default Report;


// TitleInput.js

import React, { Component } from "react";

class TitleInput extends Component {
  constructor(props) {
    super(props);
    this.handleTitleChanges = this.handleTitleChanges.bind(this);
  }

  handleTitleChanges(event) {
    const title = event.target.value;
    this.props.title(title);
  }

  render() {
    return (
      <div>
        <select onChange={this.handleTitleChanges}>
          <option selected hidden />
          <option value="Old Man and the Sea">Old Man and the Sea</option>
          <option value="Where the Red Fern Grows">
            Where the Red Fern Grows
          </option>
          <option value="Nineteen Eighty-Four">Nineteen Eighty-Four</option>
          <option value="The Kite Runner">The Kite Runner</option>
        </select>
      </div>
    );
  }
}

export default TitleInput;

// DataModel.js

export const DataModel = {
  userId: "",
  id: "",
  title: "",
  body: ""
};

Answer 1

You can see the sandbox example here: https://codesandbox.io/embed/festive-engelbart-7ned7

<MTableEditRow
  {...props}
  data={this.state.newEntry}

// on the onEditingCanceled prop, you can access the cancel method
// in this instance, we're clearing the state and then calling the
// method provided by the prop to close the showAddRow, we're passing
// mode, which will return "add"
  onEditingCanceled={(mode, rowData) => {
    this.cancelAdd();
    props.onEditingCanceled(mode);
  }}
/>

Line 309, (onEditingCanceled): https://github.com/mbrn/material-table/blob/master/src/material-table.js

Answer 2

// index.js

import React, { Component } from "react";
import MaterialTable, { MTableEditRow } from "material-table";
import axios from "axios";

import DataModel from "./DataModel";
import TitleInput from "./TitleInput";

class Report extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      workOrderOptions: [],
      newEntry: {
        userId: "",
        id: "",
        title: "",
        body: ""
      }
    };
    this.handleNewTitle = this.handleNewTitle.bind(this);
    this.cancelAdd = this.cancelAdd.bind(this);
  }

  renderData() {
    const URL = "https://jsonplaceholder.typicode.com/posts";
    axios
      .get(URL)
      .then(response => {
        this.setState({
          data: response.data
        });
      })
      .catch(error => {
        console.log("ERROR:", error);
      });
  }

  // I want to fire this method upon canceling the "add row"
  cancelAdd() {
    this.setState({
      newEntry: {
        userId: "",
        id: "",
        title: "",
        body: ""
      }
    });
  }

  handleNewTitle(title) {
    this.setState({
      newEntry: {
        // ...this.state.newEntry.title,
        title: title
      }
    });
  }

  componentDidMount() {
    this.renderData();
  }

  render() {
    const columns = [
      {
        title: "ID",
        field: "id",
        editable: "never"
      },
      {
        title: "User ID",
        field: "userId",
        editable: "never"
      },
      {
        title: "Title",
        field: "title",
        editable: "never"
      },
      {
        title: "Body",
        field: "body",
        editable: "never"
      }
    ];

    if (this.state.data) {
      return (
        <div>
          <MaterialTable
            components={{
              EditRow: props => {
                return (
                  <div>
                    <TitleInput
                      value={this.state.newEntry.title}
                      title={this.handleNewTitle}
                    />
                    {/* <BodyInput
                            value={this.state.newEntry.body}
                            body={this.handleNewBody}
                            />, <UserIDInput />, etc... */}
                    <MTableEditRow
                      {...props}
                      data={this.state.newEntry}
                      // looks like there is with onEditingCanceled
                      onEditingCanceled={(mode, rowData) => {
                        this.cancelAdd();
                        props.onEditingCanceled(mode);
                      }}
                    />
                  </div>
                );
              }
            }}
            editable={{
              // Just a sample add
              onRowAdd: newData =>
                new Promise((resolve, reject) => {
                  const result = {
                    id: 15465,
                    userId: 87946542,
                    title: this.state.newEntry.title,
                    body: "Old man Santiago"
                  };
                  console.log(result);
                  const data = this.state.data;
                  data.push(result);
                  this.setState({
                    ...this.state
                  });
                  resolve();
                })
            }}
            data={this.state.data}
            columns={columns}
            title={"Title"}
          />
        </div>
      );
    } else if (!this.state.data) {
      return <div>Loading...</div>;
    }
  }
}

export default Report;