How to change form inputs in React and post using axios?

Hi there!

I'm learning React, but not strong yet. I use a component with form, that recieve data from express backend using axios.
There is no problems with get the correct data and render it in the form inputs, but i can't cope how to change input values and post using axios. I read something about handleChange() and other staff, but it's too hard yet.

The JSON looks like this:

{
    "data": [
        {
            "_id": "5d28a6fcec97b111c2f5867d",
            "phone": "[phone]",
            "email": "[e-mail]",
            "title": "khkjhkjhkj",
            "longTitle": "lkjlkjlkjlk",
            "introTitle": "Shutruk",
            "introLongTitle": "Shutruk-Nahhunte",
            "videoLink": "khkjhkjhkj",
            "introText": "lkjlkjlkjlk",
            "__v": 0
        }
    ]
}

Here is the component:

import React, { Component } from 'react';
import axios from 'axios';

class Misc extends Component {
  state = {
    data: [],
    loading: true,
    error: false,
  }
  componentDidMount() {
    axios.get('http://localhost:5555/data')
      .then(res => {
        const data = res.data.data; // get the data array instead of object
        this.setState({ data, loading: false });
        console.log(data);
      })
      .catch(err => { // log request error and prevent access to undefined state
        this.setState({ loading: false, error: true });
        console.error(err); 
      })
  }
  render() {
    if (this.state.loading) {
      return(
        <div>
          <p> Loading... </p>
        </div>
      )
    }
    if (this.state.error || !this.state.data[0]) { // if request failed or data is empty don't try to access it either
      return(
        <div>
          <p> An error occured </p>
        </div>
      )
    }
    return (
      <form action="">
        <h2 className="center" >Change data</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Phone:</h5>
        <input type="text" value={ this.state.data[0].phone } />
        <h5>Email:</h5>
        <input type="text" value={ this.state.data[0].email } />
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].title }/>
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].longTitle }/>
        <h2 className="center" >Intro:</h2>
        <div className="center"><img src={require('../img/orn.png')} alt="" className="orn"/></div>
        <h5>Title:</h5>
        <input type="text" value={ this.state.data[0].introTitle } />
        <h5>Longtitle:</h5>
        <input type="text" value={ this.state.data[0].introLongTitle } />
        <h5>Link to video:</h5>
        <input type="text" value={ this.state.data[0].videoLink } />        
        <h5>Text:</h5>
        <textarea name="" id="" cols="30" rows="10" value={ this.state.data[0].introText }></textarea>
        <button type="submit" className="btn-large waves-effect waves-light xbutton">Save</button>
      </form>
    );
  }
}

export default Misc;

Many many thanks for any help!))

Comments

[Ericson Willians]

Might be harder, but I recommend using Redux Form. All the input data will be stored in the "store" and will be readily accessible for you to make requests. But, considering what you're doing without it, just implement a "handleChange" and create some button, pass an "onClick" to it and make the request again. It's easy, you're already manipulating the state, all you have to do is make the request again.

redux-form.com/8.2.2/

[Nested Software]

The first step is to get the input data from the form and just print it to the console - don't worry about submitting it to a server. See react docs for details.

The next step is to use axios to post. Start by getting this working using plain javascript without react. See docs for details.

Once you have these two pieces working separately, you can put them together to submit the data from your form to the api.