React, not able to change/editing anything in textbox?-CodePudding

I have data that I am getting from api. I am filling the data in the array. I am able to display the data properly. I am not able to make any change in the DisplayOrder Textboxes. Please find my data and code. What to do so that textbox is editable?

[{"featureID ":"10,"descrText":"Test1","featureText":"<h1>Feature1</h1>","displayOrder":"1},
{"featureID ":"11,"descrText":"Test2","featureText":"<h1>Feature2</h1>","displayOrder":"2},
{"featureID ":"12,"descrText":"Test3","featureText":"<h1>Feature3</h1>","displayOrder":"3}]

import React from "react";
import ReactHtmlParser from 'react-html-parser';
export class EditFeatures extends React.Component {
       constructor(props) {
              super(props);
              this.state = {
                     FeatureID: "",
                     DisplayOrder: "",
                     DescrText: "",
                     FeatureText: "",
                    Feature:[],
              };
       }
       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
                           })
                    })
       }
       render() {
              return (
                    <div>
                           <form>
      <table width="100%" cellpadding="0" cellpadding="0" border="1"><tbody>
       {this.state.Feature.map((item, index) => {
              return [
           <tr key={item.FeatureID}>
                     <td width="50px">{item.featureID}
 <input type="text" name=="DisplayOrder" size="5" maxLength="10" value={item.displayOrder} 
 onChange={(ev) => this.setState({ DisplayOrder: ev.target.value })} /></td>
<td align="left"><font size="3">{ReactHtmlParser(item.descrText)}</font></td>
<td align="left">{ReactHtmlParser(item.featureText)}</td></tr>
   ];})}
</tbody></table>
<button type="submit" name="submit">Update</button>
</form>
</div>
              );
       }
}
export default EditFeatures;

CodePudding user response：

So when you're rendering out the value of display order, you're using the item.displayOrder as the inputs value; but in your onChange event, you're updating this.state.DisplayOrder. For you to be able to update the value, you would need to update item.displayOrder value, not the states; which would be something like

this.setState(prevState => ({
  Feature: prevState.Feature.map(feature => {
    if (feature.featureID === IdOfFeatureYouWantToUpdate) {
      return { ...feature, { displayOrder: newValue }};
    }
  })
}));

If you're wanting to use the states DisplayOrder, then for the value of the input you need to use this.state.DisplayOrder instead of item.displayOrder.

CodePudding user response：

You are not updating the same state, This might help

<input type="text" id={item.FeatureID} name="DisplayOrder" size="5" maxLength="10" 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  })
    }
 } />