Simple React Form Example

This form will post ‘name and surname’ values to our PHP endpoint. It’s an ***extremely*** simple example which uses fetch to post data to our endpoint using get method.

Let’s start with our simple database.

First of all we need to create our SQLite database. I recommend to use Download it and create a database called my.db and table called names with two columns ; name and surname as text type. We will put our db near endpoint.php file where we serving our endpoint.

CREATE TABLE "names" (
	"name"   TEXT,
	"surname"   TEXT

Create our php endpoint as endpoint.php . It’s serving on with EasyPHP. (Be sure that you put my.db near it)



$name = $_GET['name'];
$surname = $_GET['surname'];

if (!empty($name) && !empty($surname)) {
$db = new SQLite3('my.db');
$db->exec("INSERT INTO names VALUES ('$name','$surname')");
echo "done";
else {
echo "name or surname is empty";

Finally, let’s create our React project somewhere else. Come in to CMD.

npx create-react-app your_app

Edit your_app/src/App.js file

import React from 'react';

export default class App extends React.Component {
  constructor(props) {

    this.state = {name: '', surname: ''};
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleSurnameChange = this.handleSurnameChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  handleNameChange(event) {
  handleSurnameChange(event) {

  handleSubmit(event) {

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={} onChange={this.handleNameChange} />
        <input type="text" value={this.state.surname} onChange={this.handleSurnameChange} />
      <input type="submit" value="Submit" />

You can test this example with

npm start

Note: If you want to use POST method instead of GET method, you can change fetch like that.

 fetch('', { 
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    headers: {
      'Content-Type' : 'application/x-www-form-urlencoded',
    body: "name=" + + "&surname=" + this.state.surname,