Event Handling

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><inputtext="text"placeholder="name"value={this.state.name}name="name"onChange={this.handleChange}/><br /><br /><label> Creating nationality: </label><inputtext="text"placeholder="nationality"value={this.state.nationality}name="nationality"onChange={this.handleChange}/><br /><br /><label> Creating Player bio: </label><inputtext="text"placeholder="bio"value={this.state.bio}name="bio"onChange={this.handleChange}/><br /><br /><label> Creating position: </label><inputtext="text"placeholder="position"value={this.state.position}name="position"onChange={this.handleChange}/><br></br><label> Creating height: </label><inputtext="text"placeholder="height"value={this.state.height}name="height"onChange={this.handleChange}/><br /><br /><label> Creating weight: </label><inputtext="text"placeholder="weight"value={this.state.weight}name="weight"onChange={this.handleChange}/><br /><br /><label> Creating appearance: </label><inputtext="text"placeholder="appearance"value={this.state.appearance}name="appearance"onChange={this.handleChange}/><br /><br /><label> Creating points: </label><inputtext="text"placeholder="points"value={this.state.points}name="points"onChange={this.handleChange}/><br /><br /><label> Creating rebound: </label><inputtext="text"placeholder="rebound"value={this.state.rebound}name="rebound"onChange={this.handleChange}/><br /><br /><label> Creating assist: </label><inputtext="text"placeholder="assist"value={this.state.assist}name="assist"onChange={this.handleChange}/><br /><br /><label> Creating age: </label><inputtext="text"placeholder="age"value={this.state.age}name="age"onChange={this.handleChange}/><br /><br /><label> Creating bonus: </label><inputtext="text"placeholder="bonus"value={this.state.bonus}name="bonus"onChange={this.handleChange}/><br /><br /><label> Creating Image: </label><inputtext="text"placeholder="image_url"value={this.state.image_url}name="image_url"onChange={this.handleChange}/><br /><br /><label> Creating YouTube: </label><inputtext="text"placeholder="youtube_url"value={this.state.youtube_url}name="youtube_url"onChange={this.handleChange}/><br /><br /><label> Creating likes: </label><inputtext="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);

--

--

--

Software Engineer | Ruby on Rails | JavaScript | HTML5 | CSS | PostgreSQL | React | Redux

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React -login-app with mock API

2 Reasons why Developers Use Node.js for Integrating Complex and Hybrid Environment

Reasons Why Expert Developers Use Node.js

Create an Animated Countdown Timer with Framer Motion and React

Form Abstraction (and a sunset)

JavaScript: Array, Objects, and Array Mutations

5 Ways To Make Money as a Developer Without a Job

An Introduction to State Management in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Soner Mezgitci

Soner Mezgitci

Software Engineer | Ruby on Rails | JavaScript | HTML5 | CSS | PostgreSQL | React | Redux

More from Medium

Klanium Sign in process

The development of pledging mechanisms and future development opportunities

INTERNSHIP EXPERIANCE AT OASIS INFOBYTE

Dev Blog Update — November