{"size": 2110, "ext": "js", "max_stars_repo_path": "src/components/FormField.js", "max_stars_repo_name": "MisterC-Rogers/mister-rogers-reactpage", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/FormField.js", "max_issues_repo_name": "MisterC-Rogers/mister-rogers-reactpage", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/FormField.js", "max_forks_repo_name": "MisterC-Rogers/mister-rogers-reactpage", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.0512820513, "max_line_length": 68, "alphanum_fraction": 0.4791469194}
import React from 'react';
import "./FormField.scss";

class FormikCloudForm extends React.Component {
  handleSubmit = () => {
    fetch('https://api.formik.com/submit/email-form/contact-form', {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(this.state),
    })
  }

  handleInputChange = ({ target: { name, value } }) => {
    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="Tophalf">
          <div className="InputDiv">
            <p className="control has-icons-left">
              <input
                className="input is-hovered"
                placeholder= "enter your name" 
                type="text" 
                name="name" 
                onChange={this.handleInputChange} 
              />
              <span class="icon is-small is-left">
                <i class="fas fa-pen"></i>
              </span>
            </p>
          </div>
          <div className="InputDiv">
            <p className="control has-icons-left">
              <input 
                className="input is-hovered"
                placeholder= "Enter your email" 
                type="text" 
                name="email" 
                onChange={this.handleInputChange} 
                />
              <span class="icon is-small is-left">
                <i class="fas fa-envelope"></i>
              </span>
            </p>
          </div>
        </div>

        <div className="InputB">
        <p className="control has-icons-left">
          <input 
            className="input textarea is-hovered" 
            placeholder="Enter your message here please" 
            type="text" 
            name="message" 
            onChange={this.handleInputChange} 
          />
          <span class="icon is-small is-left">
            <i class="fas fa-envelope-open-text"></i>
          </span>
        </p>
        </div>

        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default FormikCloudForm;

