Unexpected use of ‘event’ no-restricted-globals when using event.target.id to get id from bind(this)

This code works on Codepen: See https://codepen.io/pkshreeman/pen/YQNPKB?editors=0010 However I am trying to use this in my own ‘create-react-app’ and the error of ‘no-restricted-globals’ is trigged by event.target.id. What is a workaround for this. How do you get id from ‘this’ in react other than using the event target?

const Elem = (props) =>{ 
  return (<div>
    <h1 onClick={props.clickon} id="GM"> Good Morning! 
      <br/> 
      {props.name} {props.last} 
      <br />
      This is phase three</h1>
    <button id="btn1" onClick={props.clickon}> {props.text} </button>
      <button id="btn2" onClick={props.clickon}> Second Button </button>
      </div>
  );
};



class App extends React.Component{
  constructor(props) {
   super(props);
   this.handleClick = this.handleClick.bind(this);
 }

handleClick(){  
  var clickedId = event.target.id;
    console.log(clickedId);
  alert("It works! You clicked " + clickedId)
}
  render(){
    return (
    <Elem name = 'paul' last='shreeman' clickon={this.handleClick} text='PushMe'/>
  )
}
}

ReactDOM.render(
<App />, document.getElementById('root'))

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It’s strange that this even works in codepen — it looks like you’re using a global event property.

The right way to do this is to get the event object from the handleClick function’s first param:

handleClick(event) {  
  var clickedId = event.target.id;
  console.log(clickedId);
  alert("It works! You clicked " + clickedId)
}

Method 2

You might need to specify the event on the passing function I guess.

const Elem = (props) =>{ 
  return (<div>
    <h1 onClick={props.clickon} id="GM"> Good Morning! 
      <br/> 
      {props.name} {props.last} 
      <br />
      This is phase three</h1>
    <button id="btn1" onClick={props.clickon}> {props.text} </button>
      <button id="btn2" onClick={props.clickon}> Second Button </button>
      </div>
  );
};



class App extends React.Component{
  constructor(props) {
   super(props);
   this.handleClick = this.handleClick.bind(this);
 }

handleClick(event){  
  var clickedId = event.target.id;
    console.log(clickedId);
  alert("It works! You clicked " + clickedId)
}
  render(){
    return (
    <Elem name = 'paul' last='shreeman' clickon={(event)=>this.handleClick(event)} text='PushMe'/>
  )
}
}

ReactDOM.render(
<App />, document.getElementById('root'))

Try this if it works for you.

Method 3

Pass event as a parameter in the method this is an example:

onChangeHandaler = (event)=>{
        var inputName = event.target.name;
        var inputValue = event.target.value;

        this.setState({[inputName]:[inputValue]})
    }


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x