0

There are three input fields in the form, i want to post data from these input fields to Mysql database table using Axios. i tried many times but i cannot do it, i need code of connection to database + insert query

//PostForm.js
import React, { Component } from 'react'
import axios from "axios";
export default class PostForm extends Component {
    constructor(props) {
        super(props)   
        this.state = {
            userId:"",
             name:"",
             email:""
        }
    }
    changeHandler =e=>{
        this.setState({[e.target.name]: e.target.value})
    }
    submitHandler= e=>{
        e.preventDefault()
        const {userId, name, email}= this.state
        console.log(this.state)
        axios.post('https://jsonplaceholder.typicode.com/posts', this.state)
        .then(response=>{
            console.log(response)
        })
        .catch(error =>{
            console.log(error)
        })
    }
    render() {
        const {userId, name, email}= this.state
        return (
            <div>
                <form onSubmit={this.submitHandler}>
                    <div>
                    <input type="text" name="userId" value={userId}  onChange={this.changeHandler}/>
                    </div>
                    <div>
                    <input type ="text" name="name" value={name} onChange={this.changeHandler}/>
                    </div>
                    <div>
                    <input type= "text" name="email" value={email} onChange={this.changeHandler}/>
                    </div>
                    <button type="submit">Submit</button>                   
                </form>
            </div>
        )
    }
}
1
  • you'll need to provide the BE code, there are plenty of resources, articles and videos that tell you how to create a fullstack CRUD app. Commented Jul 22, 2020 at 19:17

1 Answer 1

0

I think what you're trying to access is a direct API exposed by MYSQL for insertion, but I'm afraid that is not there.

You will need a backend which handles the connection and executes the insert query on the trigger of an API.

Then you make an API request using Axios and solve the problem at hand.

Sign up to request clarification or add additional context in comments.

2 Comments

var mysql = require('mysql'); var express = require("express"); var bodyParser= require("body-parser"); var app= express(); app.use(bodyparser.json()); var mysqlConnection = mysql.createConnection({ host: "localhost", user: "root", password: "", database: "reactdb" }); con.connect(function(err) { if (err) throw err; console.log("Connected!"); var sql = "INSERT INTO try (ID, Name, Email) VALUES ('userId', 'name', 'email')"; con.query(sql, function (err, result) { if (err) throw err; console.log("1 record inserted"); }); });
@AfzalAbbas I understand what you are trying to do, refer to this link for clarity stackoverflow.com/questions/54325397/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.