Updating React Json Value Conditionally

Question

I didn't figure out how to edit JSON data from a Put request.(it must be PUT request)

I created some inputs as you see and I need to find a way for updating/adding new credit-debit datas on JSON data differs by "to" and "from".

Also, if a "to" value added, it must decreased from total balance and if a "from" value added, it must be added to total balance.

I created a select box and an input for this (didin't connect between json and component) My Updater component is as follows:

Component itself:

import React, { Component } from 'react';
import './Updater.scss';
import Axios from 'axios';


export default class Updater extends Component {
    constructor(){
        super();
        this.state = {
            amount: '',
            description: '',
            from: '',
            to: '',
            date: new Date()
        }
    }


    onSubmitEdit = () => {
        Axios.put('http://localhost:8080/api/balance/add', 
        {});
    }

    render() {

        return (
            <div className="updatercontainer">
                <div className="updaterinputs">
                 <input className="amount" name="amount"  
                    type="text" placeholder="Enter Amount"/>
                 <input className="description" name="description" 
                    type="text" placeholder="Enter Description"/>
                </div>
            <div className="selectbox">
            <select>
                <option value="From">From</option>
                <option value="To">To</option>
            </select>
                <input className="fromto" type="text"
                 name="fromto" placeholder="Enter From or To Name"/>
            </div>
            <div className="selectboxcontainer">

                <div className="button-container">
                 <a href="#" onClick={this.onSubmitEdit} 
                 className="button amount-submit">
                <span></span>Update</a>
                </div>

            </div>

        </div>
        )
    }
}

Answer 1

class Updater extends React.Component {
  constructor() {
    super();
    this.state = {
      amount: 0,
      description: "",
      _from: true,
      _to: false,
      date: new Date()
    };
  }

  onAmountChange = e => {
    this.setState({
      amount: e.target.value
    });
  };
  onDescriptionChange = e => {
    this.setState({
      description: e.target.value
    });
  };
  onSelectTypeChange = e => {
    console.log(e.target.value);
    this.setState({
      [e.target.value === "from" ? "_from" : "_to"]: true,
      [e.target.value !== "from" ? "_from" : "_to"]: false
    });
    if(e.target.value !== "from" && (this.state.from != null || this.state.from !== "")) { 
      this.setState({
        to: this.state.from,
        from: null
      });
    } else if(e.target.value === "from" && (this.state.to != null || this.state.to !== "")){
      this.setState({
        from: this.state.to,
        to: null
      });
    }
  };
  onFromToChange = (e) => {
    this.setState({
       [this.state._from ? "from" : "to"]: e.target.value
    });
  }
  onSubmitEdit = () => {
    Axios.put(
      "https://httpbin.org/put",
      {
        ...this.state,  
      },
      { headers: { "Content-Type": "application/json" } }
    )
      .then(response => {
        // handle Response
      })
      .catch(err => {
        // handle Error
      });
  };

  render() {
    return (
      <div className="updatercontainer">
        <div className="updaterinputs">
          <input
            onChange={this.onAmountChange}
            className="amount"
            name="amount"
            type="text"
            placeholder="Enter Amount"
          />
          <input
            onChange={this.onDescriptionChange}
            className="description"
            name="description"
            type="text"
            placeholder="Enter Description"
          />
        </div>
        <div className="selectbox">
          <select onChange={this.onSelectTypeChange}>
            <option value="from">From</option>
            <option value="to">To</option>
          </select>
          <input onChange={this.onFromToChange} className="fromto" type="text"
               name="fromto" placeholder="Enter From or To Name"/>
        </div>
        <div className="selectboxcontainer">
          <div onClick={this.onSubmitEdit} className="button-container">
            <a href="#" className="button amount-submit">
              <span>Update</span>
            </a>
          </div>
        </div>
      </div>
    );
  }
}

Consider Reading More About Handling Inputs, Forms, Events

Working Sandbox!