DEV Community

Cover image for The World Of React Events | Day 10
Web.Developer.io
Web.Developer.io

Posted on • Updated on

The World Of React Events | Day 10

What

Event occur when a user or the browser manipulate a page.

For Ex →
Page Loading , clicking a Button , Pressing any Key , Closing a window

These all are the events.

We as a developer use these Events to manipulate things in the site.

In the Case of React Events, they are not actually the DOM Events they are called Synthetic Events.

Synthetic Events → These are the Wrappers that React uses to standardise event functionality across browser.

But what is the need of Synthetic Events ??

  • Actually Events are not the part of Core JavaScript , they come from each browser’s JavaScript API , means Each browser will handle them differently.
  • So in React we have the Synthetic Events which makes the consistency across all the browser.

How

So we have many types of the Synthetic Events including keyboard events, form events , mouse events etc.

Some of them are :

onClick
onContextMenu
onDoubleClick
onDrag
onDragEnd
onDragEnter
onDragExit
onDragLeave
onDragOver
onDragStart
onDrop
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
Enter fullscreen mode Exit fullscreen mode

For more visit this link :

SyntheticEvent - React

Example →

React Events

  • when ever u try to hover on the Smily It will log a Proverb and if try to copy the text it will give u an alert
**App.js**
import './App.css';
import React, { Component } from 'react'
import CopyDemo from "./CopyDemo"
import Messenger from './Messenger';

class App extends Component {

  render(){
    return(
      <div>
        <Messenger/>
        <CopyDemo />
      </div>
    )
  }
}

export default App;
Enter fullscreen mode Exit fullscreen mode
**CopyDemo.js**
import React, { Component } from 'react'

class CopyDemo extends Component {

    constructor(props) {
        super(props);
        this.state={};
        this.handleCopy = this.handleCopy.bind(this);
    }
    handleCopy(e){
        console.log(e);
        alert('Stop Copying Me')
    }
    render(){
        return(
            <div >
                <div style={{margin: "31px auto",
    width: "50%"}}>Try to Copy the Text Below 👇</div>
                <div style={{textAlign: 'center',backgroundColor:'red',width:"50%",margin:"0 auto"}} onCopy={this.handleCopy}>
                    lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet
                </div>
            </div>
        );
    }
}

export default CopyDemo;
Enter fullscreen mode Exit fullscreen mode
**Messenger.js**
import React, { Component } from 'react'

class Messenger extends Component {

    constructor(props) {
        super(props);
        this.handleMouseEnter = this.handleMouseEnter.bind(this);
    }

    handleMouseEnter(){
        const messages = ["All good things come to an end"," A journey of a thousand miles begins with a single step"," Actions speak louder than words","  An apple a day keeps the doctor away"];
        const rand = Math.floor(Math.random() * messages.length);
        console.log(messages[rand]);
    }
    render() {
        return(
            <div className="App">
                <h1>Proverbs 👇</h1>
                <div  onMouseEnter={this.handleMouseEnter} style={{width:"30px",backgroundColor:"Red",margin:"0 auto" }}>🙂</div>
            </div>
        )
    }
}

export default Messenger;
Enter fullscreen mode Exit fullscreen mode

React-Events DEMO

Method Binding

This Keyword

class Messenger2 extends Component {

    static defaultProps = {
        messages: ["All good things come to an end"," A journey of a thousand miles begins with a single step"," Actions speak louder than words","  An apple a day keeps the doctor away"]
    }

    handleMouseEnter(){
                console.log("THIS IS:", this) // undefined 😭
        **const {messages} = this.props;**
        const rand = Math.floor(Math.random() * messages.length);
        console.log(messages[rand]);
    }
    render() {
        return(
            <div className="App">
                <h1>Proverbs 👇</h1>
                <div  onMouseEnter={this.handleMouseEnter} style={{width:"30px",backgroundColor:"Red",margin:"0 auto" }}>🙂</div>
            </div>
        )
    }
}
Enter fullscreen mode Exit fullscreen mode
  • If u try to run this , it will give an TypeError.

Also if we console.log the value of this we will see the value of undefined.

THIS

Ways to fix this problem →
1) Use Inline BInd

Inline Binding

Cons

  • New Function is Created on every render.

Function

  • Like above we have Created a Function handleClick and bind it using inline-bind but when we check if they are equal or not so it return false , So this means that a New Function is created when it renders.

2 . Arrow Function

Arrow Function

Pros →

  • No mention of Bind!

Cons →

  • Intent less clear
  • new function created on every render.

3 . In the Constructor

Constructor

  • Only need to bind once!

4 . Bonus One →

handleClick = ()=>{
    console.log("This is : ",this);
}
Enter fullscreen mode Exit fullscreen mode
  • This will also used to bind.

Method Binding with Arguments →

In the previous example our this.handleClick didn’t take any argument.

To Pass the Argument we can write like this :

onClick={this.handleClick.bind(this,<argument_name>)}
Enter fullscreen mode Exit fullscreen mode

OR

onClick={()=>{this.handleclick(argument_name)}}
Enter fullscreen mode Exit fullscreen mode

When we are using the Arrow function we have to use the Curly braces while calling the function.

Passing Functions to the child Component →

Children are often not stateful, but they need to tell parent to change the state.

But how can we send the data back to the parent Component??

Data Flow

  • A parent Component defines the Function.
  • The function is passed as a prop to a child component.
  • The child component invokes the prop.
  • The parent function is called, usually setting new state.
  • The parent component is re-rendered along with its children.

One way to pass the Function →
we have to make something like this whenever we click on the cross button the corresponding Number should Disappear.

Project

Numlist.js

import React, { Component } from 'react'
import NumberItem from "./NumberItem"

class NumberList extends Component {
    constructor(props) {
        super(props);
        this.state = {nums:[1,2,3,4,5]};
    }
    remove(num){
        this.setState(st=>({
            nums:st.nums.filter(n=> n!== num)
        }));
    }
    render(){ 
        let num = this.state.nums.map(n=>(
        <NumberItem value={n} remove={this.remove.bind(this,n)}/>
        ));
        console.log(num);
        return(

            <ul>{num}</ul>
        );
    }
}

export default NumberList;
Enter fullscreen mode Exit fullscreen mode

In this we have passed the remove function as props to the NumItem Component .

NumItem.js

import React, { Component } from 'react'

class NumberItem extends Component {
    render(){
        return(
            <li>
                {this.props.value}
                <button onClick={this.props.remove}>X</button>
            </li>
        )
    }
}

export default NumberItem;
Enter fullscreen mode Exit fullscreen mode

This code works fine but as we remove the elements the Numlist Component get Re-rendered and we are binding the method remove inline , So every time the component get rendered new function created.

To solve this we have to bind the method in the Constructor.

import React, { Component } from 'react'
import BetterNumberItem from "./BetterNumberitems"

class BetterNumberList extends Component {
    constructor(props) {
        super(props);
        this.state = {nums:[1,2,3,4,5]};
        **this.remove = this.remove.bind(this);**
    }
    remove(num){
        console.log(num);
        this.setState(st=>({
            nums:st.nums.filter(n=> n!== num)
        }));
    }
    render(){ 
        let num = this.state.nums.map((n,idx)=>(
        <BetterNumberItem value={n} remove={this.remove}/>
        ));
        return(

            <ul>{num}</ul>
        );
    }
}

export default BetterNumberList;
Enter fullscreen mode Exit fullscreen mode
import React, { Component } from 'react'

class BetterNumberItem extends Component {
    constructor(props){
        super(props);
        this.handleRemove = this.handleRemove.bind(this);
    }
    handleRemove(){
        this.props.remove(this.props.value);
    }
    render(){
        return(
            <li>
                {this.props.value}
                <button onClick={this.handleRemove}>X</button>
            </li>
        )
    }
}

export default BetterNumberItem;
Enter fullscreen mode Exit fullscreen mode

Earlier we are passing the argument to the remove method but now we aren’t so if we just try to console.log what is passed to remove we got the events.

So we call handleRemove function and in that we call the remove function and pass the argument to it.

NumList

Binding

Naming Convention →

Naming Convention

List and keys

Keys

React

  • Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array

Last Resort

and I have also learnt how to write the Functional Component
Day 10 Completed!!🥳

Discussion (1)

Collapse
developerioweb profile image
Web.Developer.io Author

Day 10 Completed 🥳🥳