I have tried various options event.target.ref , event.target.id but it’s undefined.
Passing a parameter to this save? Would that work. When I tried the whole thing broke.
What do you add the id to: DOM element or React element?
event.target references DOM element. You pass id to PollDetail Component. What happens inside of the component? Do you pass the id onto the input? Seems like you don’t.
The ID is in several places now, none of which I can access from the save/onSubmit function or any other function for that matter.
I thought you were supposed to do this in the Parent component but would it be simpler to do an API update in the child component and then refresh / re-direct back to the page?
This is crazy.
eachPollResponse = (resp) => {
const remove = () => {}
return (<PollDetail key={resp.respID}
id={resp.respID}
onSubmit={this.submit}
onChange={this.save.bind(null, resp.respID)} // applying first argument to save()
editMode={this.state.editing}
onRemove={remove} respText={resp.response}>
{resp.response}</PollDetail>)
}
save = (id, event) => { // save has two args now
event.preventDefault();
this.setState({typed:event.target.value});
alert("update " + event.target.value + " ID : "+ id );
}
higher-order function / currying
eachPollResponse = (resp) => {
const remove = () => {}
return (<PollDetail key={resp.respID}
id={resp.respID}
onSubmit={this.submit}
onChange={this.save(resp.respID)} // calling save with id
editMode={this.state.editing}
onRemove={remove} respText={resp.response}>
{resp.response}</PollDetail>)
}
save = (id) => (event) => { // save is a function that returns another function
event.preventDefault();
this.setState({typed:event.target.value});
alert("update " + event.target.value + " ID : "+ id );
}
passing the prop down into DOM element
renderForm() { // of PollDetail Component
return (<div className="responseBox">
<form onSubmit={this.props.onSubmit}>
<input
ref={this.props.key}
type="text" key={this.props.key}
className="form-control"
onChange={this.props.onChange}
////////////////////////////////////////////////
id={this.props.id} // passing id down to DOM element
///////////////////////////////////////////////
value={this.props.respText} />
<input className="btn btn-success" type="submit" value="Update" />
<button className="btn btn-default"
onClick={this.cancel} >Cancel</button>
</form>
</div>)
}
eachPollResponse = (resp) => {
const remove = () => {}
return (<PollDetail key={resp.respID}
id={resp.respID}
onSubmit={this.submit}
onChange={this.save}
editMode={this.state.editing}
onRemove={remove} respText={resp.response}>
{resp.response}</PollDetail>)
}
save = (event) => {
event.preventDefault();
this.setState({typed:event.target.value});
alert("update " + event.target.value + " ID : "+ event.target.id ); // now event.target.id should return id
}
Thanks. I will try the currying as I was attempting something like this before. (I got the syntax wrong I think.)
On first glance this seems to be working
thank you so much, you’ve save my life, stuck on this 3 hours, finally find your solution and solve my problem.
my problem was send id from component to onChange function, in the array list of data.
