Event Handling

When we create any react application, it’s mostly to rely on User interaction; When the user interacts with the application event it fires. For example (mouse clicks, key press, change event etc.). Application has to handle events and make the code work. I will explain how to handle events that work in React applications.

As you below I created a PlayerInput component. PlayerInput component is handling creating a new player profile on my application. When the user creates a new player profile, This component will make it happen.

PlayerInput Component is a class component. It’s handling state in the Component. These components also interact with my redux store. If you check the code I also imported {connect } and {addPlayer} to interact this component with my redux store. As you know Class components can handle states in React application. I am passing the states which will help me to create a new player profile on my application. After I implemented my state I created a handleChange method

Since the value attribute is set on our form element, the displayed value will always be this.state.value, making the React state the source of truth. Since handleChange runs on every keystroke to update the React state, the displayed value will update as the user types. In React, mutable state is typically kept in the state property of components, and only updated with setState()

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

After the handleChange method I also implemented the handleSubmit method. I am basically saying when the user clicks the submit button which we rendered on form, it will trigger the handleSubmit method and send a new player to my redux action component. Redux Action add the new player on my redux store.

As you see I also passed this.setState because after the user clicks the submit method, all the attributes placeholder to be empty to create for the new player when the page is refreshed.

RENDERING

When we have a class component we always pass render and return together when we are rendering in this component. We are using JSX to render our form and method which we implement in the component. JSX allowed us to write JavaScript codes with html together. So as you see we need a form to create because we are creating a new player profile which has many attributes for players such as “name” ,”nationality”,”bio”. Most important point is; When we render form tags we should pass our handleSubmit method in the form tag. It gives us the ability to create a form as we want when the user clicks the submit button <form onSubmit={this.handleSubmit}> otherwise it does not trigger all forms to be created.

We also pass value attributes and pass inside the attributes in the state to give direction to our react application where to update our form with this place holder. value={this.state.name}

We are also passing an input tag that lets the user fill in the blank part as they want. We are setting all the attributes with form to provide to the user to create form properly. As you see we also pass onChange method to all our input tags to update to state. When the user makes a new entry the form will recognize it from each keystroke and update the state on the real time onChange={this.handleChange}.

After all we pass our state attributes in the form . We are creating the last input with a type of submit to create our form. When the user fills all the columns of our form they can click the submit button to create a new player profile.

<input type=”submit” />

As you see on button I also passed export default connect(null, { addPlayer })(PlayerInput); to connect my component to my redux store with the following methods above. If you are creating a react application with redux you must always export the components as i described above.

PlayerInput.js

import React from "react";
import { connect } from "react-redux";
import { addPlayer } from "../actions/addPlayer";
class PlayerInput extends React.Component {
state = {
name: "",
height: "",
weight: "",
position: "",
nationality: "",
points: "",
appearance: "",
rebound: "",
assist: "",
age: "",
bonus: "",
bio: "",
image_url: "",
youtube_url: "",
likes: ""
};
handleChange = event => {
this.setState({
[event.target.name]: event.target.value
});
};
handleSubmit = event => {
event.preventDefault();
this.props.addPlayer(this.state);
this.setState({
name: "",
height: "",
weight: "",
position: "",
nationality: "",
points: "",
appearance: "",
rebound: "",
assist: "",
age: "",
bonus: "",
bio: "",
image_url: "",
youtube_url: "",
likes: ""
});
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label> Creating Player Name: </label>
<input
text="text"
placeholder="name"
value={this.state.name}
name="name"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating nationality: </label>
<input
text="text"
placeholder="nationality"
value={this.state.nationality}
name="nationality"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating Player bio: </label>
<input
text="text"
placeholder="bio"
value={this.state.bio}
name="bio"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating position: </label>
<input
text="text"
placeholder="position"
value={this.state.position}
name="position"
onChange={this.handleChange}
/>
<br></br>
<label> Creating height: </label>
<input
text="text"
placeholder="height"
value={this.state.height}
name="height"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating weight: </label>
<input
text="text"
placeholder="weight"
value={this.state.weight}
name="weight"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating appearance: </label>
<input
text="text"
placeholder="appearance"
value={this.state.appearance}
name="appearance"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating points: </label>
<input
text="text"
placeholder="points"
value={this.state.points}
name="points"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating rebound: </label>
<input
text="text"
placeholder="rebound"
value={this.state.rebound}
name="rebound"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating assist: </label>
<input
text="text"
placeholder="assist"
value={this.state.assist}
name="assist"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating age: </label>
<input
text="text"
placeholder="age"
value={this.state.age}
name="age"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating bonus: </label>
<input
text="text"
placeholder="bonus"
value={this.state.bonus}
name="bonus"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating Image: </label>
<input
text="text"
placeholder="image_url"
value={this.state.image_url}
name="image_url"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating YouTube: </label>
<input
text="text"
placeholder="youtube_url"
value={this.state.youtube_url}
name="youtube_url"
onChange={this.handleChange}
/>
<br />
<br />
<label> Creating likes: </label>
<input
text="text"
placeholder="likes"
value={this.state.likes}
name="likes"
onChange={this.handleChange}
onClick={this.handleChange}
/>
<br />
<br />
<input type="submit" />
</form>
</div>
);
}
}
export default connect(null, { addPlayer })(PlayerInput);

Event handling is a really very important and convenient way to handle our events. It’s very clear and easy to understand the logic. When we want to create a form or if we can handle any event in our react application. You can also control your forms with an event handler which you have some difficulties with in other programming languages. So that is why I love React everything is easy and in an order. JSX really provides us with the ability to create our form and handle events in it. It’s very important to learn about how to implement an event handler and render it with the form or other events as I described in the beginning of this article. I hope you enjoyed this article!