React Create data via form and persist that created data.

[tarkzc]

App.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  // Redirect
} from "react-router-dom"

import axios from "axios"
import './App.css';
import GameIndex from './components/GameIndex.js'
import GameShow from './components/GameShow.js'


class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      games: [] ,
      name: '',
      image: '',
      genre: '',
      platforms: '',
      video: '',
      description: '',
    }
    // Binds methods to the state 
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  // Making API call to get data from back end via "axios"
  componentDidMount(){
       axios.get("http://localhost:4000/api/games").then((response) => {
        console.log(response.data)
        this.setState({
          games: response.data
        })
      })
      }

  // Handles form submission
       handleSubmit = (e) => {
        e.preventDefault();
        const { name, platforms } = this.state;

  // Post request to the server
       axios.post('http://localhost:4000/api/games', { name: name, image: image, genre: genre, 
        platforms: platforms, video: video, description: description })
         .then((result) => {
           console.log(result);
          });
      }

  render() {
    return (
      <Router>
        <div className="App">
          <main>
            <Route path='/home' render={() => {
                return (
                <GameIndex handleSubmit={this.handleSubmit} games={this.state.games} />
              )
              } }
            />
            <Route path="/games/:name" component={GameShow}/>
          </main>
        </div>
      </Router>
    );
  }
}

export default App;


GameIndex.js

  <div>
      <h2> Add a Game </h2>
      <form onSubmit={this.props.handleSubmit}>

          <input type="text" name="name"   placeholder="Name"/>
          <input type="text" name="image"  placeholder="Img Url"/>
          <input type="text" name="genre"  placeholder="Genre"/>
          <input type="text" name="platforms" placeholder="Platforms"/>
          <input type="text" name="video"   placeholder="Video Url"/>
          <input type="text" name="description" placeholder="Description"/>
          <button type="submit">Submit</button>

      </form>
 </div>

When I submit form and refresh the page I got data but its values are empty quotes. Like this:

What should I do to get actual submitted values?

[superbuggy]

You have almost everything you need, but you will need a change handler function to update component state with the user-input from the text boxes.

You'll want to use the onChange prop on your text fields and it should call a function for handling changes, i.e. updating component state.

  handleChange(e){
    this.setState({
      somePropertyOnState: e.target.value
    })
  }

[tarkzc]

handleChange(e){
this.setState({
name: e.target.value,
img_url: e.target.value,
genre: e.target.value,
platforms: e.target.value,
video_url: e.target.value,
description: e.target.value
})
}

I tried to get all the state values and when I submitted it resulted in every value to be same:

[tarkzc]

I got description's input value for every input value.

[superbuggy]

Check this out