I am trying to implement Netlify form with React.js contact form

Question

I tried multiple methods but was enable to do anything. Also referred to this post as well https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#troubleshooting-tips

but nothing helped. How can I do that?

import React, { Component } from 'react';
import { Grid, Cell, List, ListItem, ListItemContent } from 'react-mdl';
import "bootstrap-css-only/css/bootstrap.min.css";
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

const encode = (data) => {
    return Object.keys(data)
   .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
   .join("&");
  }


class Contact extends Component {

 constructor(props) {
      super(props);
      this.state = { name: "", email: "", message: "" };
    }

handleSubmit = e => {
      fetch("/", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: encode({ "form-name": "contact", ...this.state })
      })
        .then(() => alert("Success!"))
        .catch(error => alert(error));

      e.preventDefault();
    };

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

  render() {
    return(
      <div className="contact-body">
        <Grid className="contact-grid">
            <Cell col={12}>
            <h2 style={{textAlign:"center", fontFamily:"Georgia", fontWeight:"bold", fontFamily:"Georgia", fontWeight:"bold"}}>Contact Me</h2>
            <hr className="headinghr"/>
            </Cell>
          <Cell col={4}>
              <div style={{textAlign:'center', paddingTop:'10px'}}>
              <i style={{fontSize: '40px'}} className="fas fa-envelope-square" aria-hidden="true"/>
              <h2 style={{fontSize:'190%', fontFamily: 'Anton', textAlign:'center'}}>E-mail</h2>
              </div>
              <div style={{fontFamily: 'Anton', textAlign:'center', fontSize:'20%'}}>
              <h3 style={{fontSize:'650%'}}>abc@gmail.com</h3>
              </div>
          </Cell>
          <Cell>
          <form onSubmit={this.handleSubmit}>
          <p>
            <label>
              Your Name: <input type="text" name="name" value={name} onChange={this.handleChange} />
            </label>
          </p>
          <p>
            <label>
              Your Email: <input type="email" name="email" value={email} onChange={this.handleChange} />
            </label>
          </p>
          <p>
            <label>
              Message: <textarea name="message" value={message} onChange={this.handleChange} />
            </label>
          </p>
          <p>
            <button type="submit">Send</button>
          </p>
        </form>`
          </Cell>
        </Grid>
      </div>
    )
  }
}
export default Contact;```

Answer 1

I had a similar issue recently, what worked for me was inserting this code snippet into the index.html before id="root"

    <!-- A little help for the Netlify post-processing bots -->
    <form name="contact" netlify netlify-honeypot="bot-field" hidden>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <textarea name="message"></textarea>
    </form>