React: Form Submit how to pass multiple row data?

Question

I am getting the data from api. I am displaying Feature ID, DisplayOrder textbox in the rows. User can change the Display Order value in the multiple rows. How to update the information using Post API? I am passing one value FeatureID and DisplayOrder in form submit. Please help to pass all the values that are changed(FeatureID, DisplayOrder) in form submit. If suppose FeatureID 11 and FeatureID 13 Display order changes, then form submit needs to pass these information only.

{"FeatureID":"11","DescriptionText":"Travel","FeatureText":Feature2,"DisplayOrder":"1","Date":"08/30/2011","FeatureName":"Research"},
{"FeatureID":"12","DescriptionText":"Sport","FeatureText":Feature3,"DisplayOrder":"2","Date":"08/30/2011","FeatureName":"Research"},
{"FeatureID":"13","DescriptionText":"Art","FeatureText":Feature4,"DisplayOrder":"3","Date":"08/30/2011","FeatureName":"Research"}]

import React from "react";
export class EditFeatures extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      FeatureID: "",
      DisplayOrder: "",
      DescriptionText: "",
      FeatureText: "",
      Feature: [],
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  componentDidMount() {
    this.DisplayFeatures();
  }
  DisplayFeatures() {
    fetch(REQUEST_URL, { "Content-Type": "application/xml; charset=utf-8" })
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          Feature: data,
          loading: false,
        });
      });
  }
  handleSubmit(event) {
    event.preventDefault();
    const FeatureID = this.state.FeatureID;
    const DisplayOrder = this.state.DisplayOrder;
    const data = {
      FeatureID,
      DisplayOrder,
    };
    fetch(REQUEST_URL, {
      method: "POST",
      body: JSON.stringify(data),
      headers: { "Content-Type": "application/json" },
    })
      .then((response) => response.json())
      .catch((error) => console.error("Error:", error))
      .then((response) => console.log("Success", data));
    window.location.href = "/";
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <table>
            <tbody>
              {this.state.Feature.map((item, index) => {
                return [
                  <tr key={item.FeatureID}>
                    <td>
                      <input
                        type="text"
                        id={item.FeatureID}
                        name="DisplayOrder"
                        value={item.DisplayOrder}
                        onChange={(ev) => {
                          const newFeature = this.state.Feature.map((f) => {
                            if (f.FeatureID == ev.target.id) {
                              f.DisplayOrder = ev.target.value;
                            }
                            return f;
                          });
                          this.setState({ Feature: newFeature });
                        }}
                      />
                    </td>
                    <td>{item.DescriptionText}</td>
                    <td>{item.FeatureTex}</td>
                  </tr>,
                ];
              })}
            </tbody>
          </table>
          <button type="submit" name="submit">
            Update
          </button>
        </form>
      </div>
    );
  }
}
export default Edit_Features;

Answer 1

The answer is simple, just sort Feature array on DisplayOrder in handleSubmit like this:

import React from "react";
export class EditFeatures extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      FeatureID: "",
      DisplayOrder: "",
      DescriptionText: "",
      FeatureText: "",
      Feature: [],
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  componentDidMount() {
    this.DisplayFeatures();
  }
  DisplayFeatures() {
    fetch(REQUEST_URL, { "Content-Type": "application/xml; charset=utf-8" })
      .then((response) => response.json()) // you passed Content-Type: "application/xml" as request header but here you use response.json, remove Content-Type header if server API returns json
      .then((data) => {
        this.setState({
          Feature: data.map((feature) => ({ ...feature, changed: false })),
          loading: false,
        });
      });
  }
  handleSubmit(event) {
    event.preventDefault();
    const FeatureID = this.state.FeatureID;
    const DisplayOrder = this.state.DisplayOrder;
    const Feature = this.state.Feature;
    const data = {
      FeatureID,
      DisplayOrder,
      Feature, // this is how you pass an array to server, how will the server deserialize this depends on the framework used there
    };
    const self = this;
    fetch(REQUEST_URL, {
      method: "POST",
      body: JSON.stringify(data),
      headers: { "Content-Type": "application/json" },
    })
      .then((response) => response.json())
      .catch((error) => console.error("Error:", error))
      .then((response) => {
        /**
         * sort manipulates the array so we clone the Feature array before sorting it
         * we pass comparator function to sort so that we sort on DisplayOrder
         */
        const newFeature = [...this.state.Feature];
        newFeature.sort((f1, f2) => f2.DisplayOrder - f1.DisplayOrder);
        self.setState({ Feature: newFeature });
      });
    window.location.href = "/"; // ok why does this exist?!!
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <table>
            <tbody>
              {this.state.Feature.map((item) => {
                return [
                  <tr key={item.FeatureID}>
                    <td>
                      <input
                        type="text"
                        id={item.FeatureID}
                        name="DisplayOrder"
                        value={item.DisplayOrder}
                        onChange={(ev) => {
                          // this is the proper way to update an element inside an array
                          const newFeature = [...this.state.Feature];
                          // I prefer === over == to avoid errors
                          const featureIndex = newFeature.findIndex(
                            (f) => f.FeatureID === ev.target.id
                          );
                          newFeature[featureIndex].DisplayOrder =
                            ev.target.value;
                          this.setState({ Feature: newFeature });
                        }}
                      />
                    </td>
                    <td>{item.DescriptionText}</td>
                    <td>{item.FeatureTex}</td>
                  </tr>,
                ];
              })}
            </tbody>
          </table>
          <button type="submit" name="submit">
            Update
          </button>
        </form>
      </div>
    );
  }
}
export default EditFeatures;

this way when you click button submit, if the POST request to the server succeeds, the table will be updated according to DisplayOrder.

Note

If the request to the server fails for any reason the table won't be updated, if you don't care about the response of the server just sort the Feature array outside the .then before issuing the request.