Hello! Perhaps the question is stupid, but I could not find the solution to the problem.

The task is to implement the possibility of CRUD operations for the application. C, R, D is already there. You must implement the ability to edit and save changes on the server. The data is downloaded from the database in this format:

[ ... { id: "1", title: "some title", number: "1111", format: "some format", string: "some string" } ... ]

Used the module "react-edit-inline", which allows you to edit the field when you click on it. This is the component itself:

 export default React.createClass({ dataChanged(newdata) { this.setState({ data: newdata }); }, render() { return ( <div> <div <InlineEdit paramName="title" change={this.dataChanged} text={this.props.title} /> <InlineEdit paramName="year" change={this.dataChanged} text={this.props.nubmer} /> <InlineEdit paramName="year" change={this.dataChanged} text={this.props.format} /> <InlineEdit paramName="stars" change={this.dataChanged} text={this.props.string} /> </div> ) } })

In the "dataChanged" function, I have access only to the property-value pair. How do I access the object in which this property is changed? In other words, how to implement the update behavior?

Probably I need to use the componentDidUpdate method, but I cannot formulate how to correctly address the component in order to send the changed data to the server.

I would be grateful for the help.

    1 answer 1

    You need to send a callback to the component where the data is being edited. And update the data from the outside, because this.state will only change your data for the component locally, but you do not have access to the change to this.props.

     export default React.createClass({ dataChanged(newdata) { this.props.onChange(this.props.id, newData) }, render() { return ( <div> <div <InlineEdit paramName="title" change={this.dataChanged} text={this.props.title} /> <InlineEdit paramName="year" change={this.dataChanged} text={this.props.nubmer} /> <InlineEdit paramName="year" change={this.dataChanged} text={this.props.format} /> <InlineEdit paramName="stars" change={this.dataChanged} text={this.props.string} /> </div> ) } })