JAVASCRIPT

add listener in react

// You can do this:
function App() {
  	return (
      	<div onChange={() => console.log('You clicked me')}>
      	hello!
      	</div>
    )
}

// or...
import {useRef, useEffect} from 'react'

const wrapperRef = useRef(null)

useEffect(() => {
  	function callback() {
      	console.log('You clicked me!')
    }
  
  	wrapperRef.current?.addEventListener('click', callback)
  
  	return () => wrapperRef.current?.removeEventListener('click', callback)
}, [])

function App() {
  	return (
      	<div ref={wrapperRef}>
      	hello!
      	</div>
    )
}

react event listener

// it a component
import React from 'react';

class App extends React.Component {
      //call function (ECMAScript 5) from tag input:text
  handleChange = e => {
    //
    console.log(`${e.target.value}`)
  }
  render() { 
    return (
      <div className="App">
        <input type="text" name="input" id="" placeholder="" onChange={this.handleChange}/>
      </div>
    );
}
}

export default App;

how to use an event listener in a react js component

class Button extends React.Component {
  scream() {
    alert('AAAAAAAAHHH!!!!!');
  }

  render() {
    return <button onClick={this.scream}>AAAAAH!</button>;
  }
}

ReactDOM.render(<Button />, document.getElementById('app'));