How to change form inputs in React and post using axios?
Tags: react
Published: 2019-07-15 06:22:14

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": "+1 (111) 111 11 11",
                "email": "shutruk@gmail.com",
                "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!))