trjhtr

class EventEmitter 
 constructor() 
 this.events = 
 

 on(eventName, fn) 
 if(!this.events[eventName]) 
 this.events[eventName] = 
 

 this.events[eventName].push(fn)
 return () => 
 this.events[eventName] = this.events[eventName].filter(eventFn => fn !== eventFn)
 
 

 emit(eventName, data) 
 const event = this.events[eventName]
 if (event) 
 event.forEach(fn => 
 fn.call(null, data)
 )
 
 


let emitter = new EventEmitter()

class App extends React.Component 
 constructor(props)
 super(props)

 this.state = 
 firstName: '',
 isValid: false,
 
 

 handleSubmit(e) 
 e.preventDefault()

 let firstName, isValid

 emitter.on('newdata', function(data) 
 firstName = data['firstName']
 isValid = data['isValid']
 )

 emitter.emit('newdata', 
 firstName: 'Kitty',
 isValid: true,
 )

 this.setState(firstName, isValid)

 if (isValid) 
 console.log('success')
 else 
 console.log('error')
 

 setTimeout(() => 

 emitter.emit('newdata', 
 firstName: 'Joni',
 isValid: false,
 )

 this.setState(firstName, isValid)

 if (isValid) 
 console.log('success')
 else 
 console.log('error')
 

 , 1000);
 

 handleValidation(e) 
 this.setState(
 firstName: e.target.firstName
 )
 

 render() 
 return (
 <form>
 <label>
 Name:
 </label>
 <input
 type='text'
 name ='firstName'
 value = this.state.firstName
 onChange = this.handleValidation.bind(this)
 />
 <button onClick = this.handleSubmit.bind(this)>
 Submit
 </button>
 </form>
 )
 


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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>