How to calculate input value and save value in react

1

This is my code: Please help

import React, { useEffect, useState } from "react";

import Header from "./Header";

import Footer from "./Footer";

import {

  Card,

  Container,

  Row,

  Col,

  Button,

  Image,

  Table,

  Form

} from "react-bootstrap";

import { Link } from "react-router-dom";

import { config } from "./Constants";

import axios from "axios";

let url = config.url.API_URL;

let my_cash_settings_url =

  url + "/api/v5/partner/chemists/my_cash_settings.json";

  let my_cash_settings_update_url =

  url + "/api/v5/partner/chemists/my_cash_setting_update.json";

function ChemistMycashSettings(props) {

  const [branches, setbranches] = useState([]);

  const [proprietor_name, setproprietor_name] = useState([]);

  const [org_share, setorg_share] = useState([]);

  const [store_share, setstore_share] = useState([]);

  const [input, setInput] = useState([]);

  

  useEffect(() => {

    axios

      .get(

        my_cash_settings_url + "?token=" + localStorage.getItem("auth-token")

      )

      .then(function(response) {

        if (response.data.status == "200") {

          setbranches(response.data.branches);

          // console.log(response.data.branches)

        }else{alert(response.data.message)}

        

        // setproprietor_name(response.data.branches);

        // setorg_share(response.data.branches);

        // setstore_share(response.data.branches);

      })

      .catch(function(response) {});

  }, []);

  const submit = e => {

    console.log(e.target);

    e.preventDefault();

    let telephone = localStorage.getItem("mobile");

    let authToken = localStorage.getItem("auth-token");

    axios({

      method: "post",

      url:

        my_cash_settings_update_url + "?token=" + localStorage.getItem("auth-token"),

      headers: { "Content-Type": "application/x-www-form-urlencoded" },

       data: {branches: branches}

    })

      .then(function(response) {

        if (response.data.status == "200") {

          alert(response.data.message);

          //props.history.push("/dashboard");

        } else if (response.data.status == "422") {

          alert(response.data.message);

        }

      })

      .catch(function(response) {

        console.log(response);

        alert("Error");

      });

  };

  const updateFieldChanged = index => e => {

    console.log('index: ' + index);

    console.log('property name: '+ e.target.name);

    let newArr = [...branches]; // copying the old datas array

    newArr[index][e.target.name] = e.target.value; // replace e.target.value with whatever you want to change it to

    setbranches(newArr); // ??

}

// function set(name, org_share) {

//   const input = parseFloat(updateFieldChanged);

//   if (Number.isNaN(input)) {

//     return '';

//   }

//   const output = convert(input);

//   const rounded = Math.round(output * 1000) / 1000;

//   return rounded.toString();

// }

  return (

    <div>

      <Header></Header>

      <section className="myChemist">

        <h1>

          myCash Settings{" "}

          <span>

            You can choose to split{" "}

            <Image src="/images/new/myCash-Coin.svg" alt="Offers"></Image> 2%

            myCash between org and individual store

          </span>

        </h1>

        <Container>

          <Form action="ChemistMycashSettings1" type="post" onSubmit={submit}>

            {/*  */}

            <Card className="Cash-setting-card" >

              <Table className="text-left" hover responsive>

                <thead className="primary">

                  <tr>

                    <th>Store Name</th>

                    <th className="text-center">Organization Share</th>

                    <th className="text-center">Store Share</th>

                  </tr>

                </thead>

                <tbody>

                  {branches.map((branch,index) => (

                    <tr key={branch.id}>

                      <td>{branch.proprietor_name}</td>

                      <td className="text-center">

                        <input

                          type="number"

                          name="org_share"    

                          min="0" max="2"

                          step="0.01"

                          value={branch.org_share}

                          onChange={updateFieldChanged(index)}

                        ></input>{" "}

                        %

                      </td>

                      <td className="text-center">

                        <input

                          type="number"

                          name="store_share"

                          min="0" max="2"

                          step="0.01"

                          value={branch.store_share}

                          onChange={updateFieldChanged(index)}

                          ></input>{" "}

                        %

                      </td>

                    </tr>

                  ))}

                </tbody>

              </Table>

            </Card>

            <input

              type="submit"

              value="Save Changes"

              className="btn-md btn-theme btn-block click-btn"

              name="Submit"

              className="d-inline-block mt-2  btn-lg mt-3 btn btn-success text-uppercase"

            ></input>

          </Form>

        </Container>

      </section>

      <Footer></Footer>

    </div>

  );

}

export default ChemistMycashSettings;
2

Can you give more details of what you are trying to accomplish with the code you posted? What does it currently do vs. what you want it to do?

3

I want to save data in localStorage

4