REACT event target value works but what about the ID?

REACT event target value works but what about the ID?
0
#1

I can’t seem to get the ID of the item I am trying to edit.

   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.ref );
	}

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.

#2

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.

#3

If you just want to pass a parameter to the this.save function, you can do:
onChange={this.save.bind(respID)}

#4

How am I supposed to do that?
I am trying:

#5

Try event.target.getAttribute(“id”)

#6

REact Mess.png1225x568 111 KB

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.

#7

Great, now how do I access it in the save function?

#8

You’ve got at least 3 ways to make it work:

  • partial application
  • higher-order function / currying
  • passing the prop down into DOM element
#9

Would you care to explain those, for the beginners out there (like me) ?

#10

All the fun for me? Well, as you wish.

Didn’t run codes below so there may be bugs.

  • partial application
   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
	}
#11

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 :thumbsup: