Update and save a component value - ReactJS

Question

I am making a checkbox button so that every time I press it the value of a component field is changed, since it belongs to a cost sheet and every time I press it it reduces a cost since it removes a waste.

Checkbox and yd/unit field that should change

The problem I'm having is that when I press a button to expand another component, the value that I modify with the checkbox returns to its original value and I don't want it to happen that way.

I don't know if it has to do with a reload on the page or something with the states.

here's the code that handle that field:

FixElementValue(value){
    if(value === null || value === undefined || value==="" || isNaN(value)){
      return '0';
    }
    return value;
  }

let dms=[];
    detail.dms.map(fabric => {
      dms.push({
        "ydsunit": this.FixElementValue(fabric.ydsunit),  
      })
      return fabric;
    })

ydsunitHandle = (inputId, outputId, fabricsKey, valueChanged, waste) => {
    let input = document.getElementById(inputId);
    let output = document.getElementById(outputId);
        
    if (input.value !== null && input.value !== undefined && input.value !== "") {
      let { dms } = this.state.detail;
      dms[fabricsKey][valueChanged] = (input.value * 1);
      let fabric = dms[fabricsKey]

      let ydsunit = fabric.yieldydslbs * fabric.lbsunitwaste;
      //let ydsunit = fabric.yieldydslbs * fabric.lbsunit;
     
      dms[fabricsKey].ydsunit = isNaN(ydsunit) ? 0.0 : ydsunit;
       

      this.setState({
        detail: {...this.state.detail, dms:dms}
      })
      
      output.value = this.state.detail.dms[fabricsKey].ydsunit;
    }
  }

component: <ConsumptionCard
        ydsunitHandle={this.ydsunitHandle}
      />

And inside of the component of ConsumptionCard

import React from 'react';

import {
  Input,
  Table
} from "reactstrap";

function ConsumptionCard ({...props}) {
  const quickCosting = props.quickCosting;
  
  
  function handleChange(inputId, outputId, fabricsKey, calculateValueName, valueChanged, event, waste) {

    if (calculateValueName.includes("weightBWashCalculated")) {
      let indexOfOutput = outputId.indexOf(`consumption-${fabricsKey}-weightBWashCalculated`)
      props.weightBWashCalculatedHandle(inputId, outputId[indexOfOutput], fabricsKey, valueChanged)
    }
    if (calculateValueName.includes("yieldydslbs")) {
      let indexOfOutput = outputId.indexOf(`consumption-${fabricsKey}-yieldydslbs`)
      props.yieldydslbsHandle(inputId, outputId[indexOfOutput], fabricsKey, valueChanged)
    }
    if (calculateValueName.includes("lbsunit")) {
      let indexOfOutput = outputId.indexOf(`consumption-${fabricsKey}-lbsunit`)
      props.lbsunitHandle(inputId, outputId[indexOfOutput], fabricsKey, valueChanged)
    }
    if (calculateValueName.includes("lbsunitwaste")) {
      let indexOfOutput = outputId.indexOf(`consumption-${fabricsKey}-lbsunitwaste`)
      props.lbsunitwasteHandle(inputId, outputId[indexOfOutput], fabricsKey, valueChanged)
    }
    if (calculateValueName.includes("sqinchunit")) {
      let indexOfOutput = outputId.indexOf(`consumption-${fabricsKey}-sqinchunit`)
      props.sqinchunitHandle(inputId, outputId[indexOfOutput], fabricsKey, valueChanged)
    }


   
  
    if (calculateValueName.includes("ydsunit")) {
      let indexOfOutput = outputId.indexOf(`consumption-${fabricsKey}-ydsunit`)
      props.ydsunitHandle(inputId, outputId[indexOfOutput], fabricsKey, valueChanged, waste)
    }
    if (parseFloat(event.target.value) > parseFloat(event.target.max)) {
      event.target.value = event.target.max
    }
    
  }

  function updateFabricValues(fabric, fabricKey, waste) {
    let plies = fabric.dm_pt ? 1 : 2;
    let ydsXunit = (fabric.Bwidth / 36) * (1 / (fabric.dm_width * plies)) * fabric.Blong;
    let lbsXunit = (ydsXunit / fabric.yieldydslbs);

    // weightBWashOriginal original

    // weightBWashCalculated update
    fabric.weightBWashCalculated = fabric.weightBWashOriginal / 33.9057475;
    if (document.getElementById(`consumption-${fabricKey}-weightBWashCalculated`))
      document.getElementById(`consumption-${fabricKey}-weightBWashCalculated`).value = fabric.weightBWashCalculated.toFixed(4);

    // yieldydslbs update
    fabric.yieldydslbs = (576 / (fabric.weightBWashCalculated * plies * fabric.dm_width));
    if (document.getElementById(`consumption-${fabricKey}-yieldydslbs`))
      document.getElementById(`consumption-${fabricKey}-yieldydslbs`).value = fabric.yieldydslbs.toFixed(4);

    // lbsunit update
    fabric.lbsunit = ( (fabric.markerLong / fabric.pieceByMarker) / (fabric.yieldydslbs) ) + lbsXunit;
    if (document.getElementById(`consumption-${fabricKey}-lbsunit`)) 
      document.getElementById(`consumption-${fabricKey}-lbsunit`).value = fabric.lbsunit.toFixed(4);

    // lbsunitwaste update
    fabric.lbsunitwaste = fabric.lbsunit * (1.05);
    if (document.getElementById(`consumption-${fabricKey}-lbsunitwaste`))
      document.getElementById(`consumption-${fabricKey}-lbsunitwaste`).value = fabric.lbsunitwaste.toFixed(4);

    // sqinchunit update
    fabric.sqinchunit = (fabric.markerWidth * fabric.markerLong * 36 * (fabric.markerEfficiency / 100)) / fabric.pieceByMarker;
    if (document.getElementById(`consumption-${fabricKey}-sqinchunit`))
      document.getElementById(`consumption-${fabricKey}-sqinchunit`).value = fabric.sqinchunit.toFixed(4);

    // ydsunit update
    if(waste){
      fabric.ydsunit = fabric.yieldydslbs * fabric.lbsunit;
    }
    else{
      fabric.ydsunit = fabric.yieldydslbs * fabric.lbsunitwaste;
    }
   // fabric.ydsunit = fabric.yieldydslbs * fabric.lbsunitwaste;
    if (document.getElementById(`consumption-${fabricKey}-ydsunit`))
      document.getElementById(`consumption-${fabricKey}-ydsunit`).value = fabric.ydsunit.toFixed(4);

    // ydsXunit add
    fabric.ydsXunit = ydsXunit
    if (document.getElementById(`consumption-${fabricKey}-ydsXunit`))
      document.getElementById(`consumption-${fabricKey}-ydsXunit`).value = fabric.ydsXunit.toFixed(4);

    // lbsXunit add
    fabric.lbsXunit = lbsXunit
    if (document.getElementById(`consumption-${fabricKey}-lbsXunit`))
      document.getElementById(`consumption-${fabricKey}-lbsXunit`).value = fabric.lbsXunit.toFixed(4);
    return fabric;
  }

  const sums = {
    lbsunit: 0,
    lbsunitwaste: 0,
    sqinchunit: 0,
    ydsunit: 0
  }
  let checkWaste = true
  return (
    <div>
      <Table className="tablesorter" style={{width:"2000px"}} responsive>
        <thead className="text-primary">
          <tr>
            <th style={{width:"250px"}}>DM</th>{/** select.label */}
            <th style={{width:"50px"}}>Weight b. wash O.</th>{/** weightBWashOriginal */}
            <th style={{width:"50px"}}>Weight b. wash C.</th>{/** weightBWashCalculated */}
            <th style={{width:"50px"}}>F. Width</th>{/** dm_width */}
            <th style={{width:"50px"}}>Marker Width</th>{/** markerWidth */}
            <th style={{width:"50px"}}>Piles Tubular</th>{/** dm_pt */}
            <th style={{width:"50px"}}>Yield (yd/lb)</th>{/** yieldydslbs */}
            <th style={{width:"50px"}}>% Utilization</th>{/** markerEfficiency */}
            <th style={{width:"50px"}}>Marker length</th>{/** markerLong */}
            <th style={{width:"50px"}}>Units in marker</th>{/** pieceByMarker */}
            <th style={{width:"50px"}}>lb * unit</th>{/** lbsunit */}
            <th style={{width:"50px"}}>lb * unit + waste</th>{/** lbsunitwaste */}
            <th style={{width:"50px"}}>inch^2 / unit</th>{/** sqinchunit */}
            <th style={{width:"50px"}}>yd / unit</th>{/** ydsunit */}
          </tr>
        </thead>
        <tbody>
          {
            (props.fabrics !== undefined) && (props.fabrics.length > 0) &&
            (
              props.fabrics.map((val, key) => {
                let selectedFabric = props.fabricsCatalog.find(o => o.id === val.id);
                let tempWeightBWashOriginal=0;
                let tempMarkerWidth=0;
                let dm_width = parseFloat(val.dm_width?val.dm_width:0);
                let weightBWashOriginal= parseFloat(val.weightBWashOriginal?val.weightBWashOriginal:0);
                let markerWidth = parseFloat(val.markerWidth?val.markerWidth:0)
                sums.lbsunit += parseFloat(val.lbsunit ? val.lbsunit : 0.0);
                sums.lbsunitwaste += parseFloat(val.lbsunitwaste ? val.lbsunitwaste : 0.0);
                sums.sqinchunit += parseFloat(val.sqinchunit ? val.sqinchunit : 0.00);
                sums.ydsunit += parseFloat(val.ydsunit ? val.ydsunit : 0.00);
                if(selectedFabric && selectedFabric!==undefined) {
                  tempWeightBWashOriginal = weightBWashOriginal>0?weightBWashOriginal:selectedFabric.weight;
                  tempMarkerWidth = markerWidth>0?markerWidth:selectedFabric.widthMark;
                  val.dm_width = dm_width>0.00?dm_width:selectedFabric.width;
                }else{
                  tempWeightBWashOriginal = weightBWashOriginal;
                  tempMarkerWidth = markerWidth;
                  val.dm_width = dm_width;
                }
                val.weightBWashOriginal=tempWeightBWashOriginal;
                val.markerWidth=tempMarkerWidth;
                val = updateFabricValues(val, key);
                return (
                  <>
                    <Input
                      type={"checkbox"}
                      
                      className="check"
                      //value={header.embellishment_description.length !== 0 ? header.embellishment_description[idx].id : color}
                    
                      onChange={(event) => {
                        checkWaste = event.target.checked
                        updateFabricValues(val, key, event.target.checked)
                  }}
                    />
                  <tr key={key}>
                
                    <td>
                  
                      {/** DM: select.label */}
                      <p className="text-primary">
                        {val.show_name ? val.show_name : ""}
                      </p>
                    </td>
                    <td>
                      {/** weightBWashOriginal */}
                      <Input
                        id={`consumption-${key}-weightBWashOriginal`}
                        type="number"
                        value={val.weightBWashOriginal}
                        onChange={(event) => handleChange(
                          `consumption-${key}-weightBWashOriginal`, 
                          [`consumption-${key}-weightBWashCalculated`,
                          `consumption-${key}-lbsunit`],
                          key,
                          ["weightBWashCalculated", "lbsunit"],
                          "weightBWashOriginal",
                          event
                        )}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** weightBWashCalculated */}
                      <Input
                        id={`consumption-${key}-weightBWashCalculated`}
                        type="number"
                        value={isNaN(val.weightBWashCalculated) ? 0.0 : val.weightBWashCalculated.toFixed(4)}
                        onChange={(event) => handleChange(
                          `consumption-${key}-weightBWashCalculated`,
                          [`consumption-${key}-yieldydslbs`],
                          key,
                          ["yieldydslbs"],
                          "weightBWashCalculated",
                          event
                        )}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** dm_width */}
                      <Input
                        id={`consumption-${key}-dm_width`}
                        type="number"
                        value={isNaN(val.dm_width) ? 0.0 : val.dm_width}
                        onChange={(event) => handleChange(
                          `consumption-${key}-dm_width`,
                          [`consumption-${key}-yieldydslbs`],
                          key,
                          ["yieldydslbs"],
                          "dm_width",
                          event
                        )}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** markerWidth */}
                      <Input
                        id={`consumption-${key}-markerWidth`}
                        type="number"
                        value={val.markerWidth ? val.markerWidth : 0.0}
                        onChange={(event) => handleChange(
                          `consumption-${key}-markerWidth`, 
                          [`consumption-${key}-sqinchunit`],
                          key,
                          ["sqinchunit"],
                          "markerWidth",
                          event
                        )}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** dm_pt */}
                      <Input
                        id={`consumption-${key}-dm_pt`}
                        type="number"
                        value={val.dm_pt ? 1 : 2}
                        onChange={(event) => handleChange(
                          `consumption-${key}-dm_pt`, 
                          [`consumption-${key}-yieldydslbs`,
                          `consumption-${key}-lbsunit`],
                          key,
                          ["yieldydslbs", "lbsunit"],
                          "dm_pt",
                          event
                          )}
                        min="0.00"
                        max="2"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** yieldydslbs */}
                      <Input
                        id={`consumption-${key}-yieldydslbs`}
                        type="number"
                        value={isNaN(val.yieldydslbs) ? 0.0 : val.yieldydslbs.toFixed(4)}
                        onChange={(event) => handleChange(
                          `consumption-${key}-yieldydslbs`,
                          [`consumption-${key}-lbsunit`,
                          `consumption-${key}-ydsunit`],
                          key,
                          ["lbsunit", "ydsunit"],
                          "yieldydslbs",
                          event,
                          checkWaste
                        )}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** markerEfficiency */}
                      <Input
                        id={`consumption-${key}-markerEfficiency`}
                        type="number"
                        value={val.markerEfficiency?val.markerEfficiency:0.00}
                        onChange={(event) => handleChange(
                          `consumption-${key}-markerEfficiency`, 
                          [`consumption-${key}-sqinchunit`],
                          key,
                          ["sqinchunit"],
                          "markerEfficiency",
                          event
                        )}
                        min="0"
                        max="100"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** markerLong */}
                      <Input
                        id={`consumption-${key}-markerLong`}
                        type="number"
                        value={val.markerLong ? val.markerLong : 0.00}
                        onChange={(event) => handleChange(
                          `consumption-${key}-markerLong`,
                          [`consumption-${key}-lbsunit`,
                          `consumption-${key}-sqinchunit`],
                          key,
                          ["lbsunit", "sqinchunit"],
                          "markerLong",
                          event
                        )}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** pieceByMarker */}
                      <Input
                        id={`consumption-${key}-pieceByMarker`}
                        type="number"
                        value={val.pieceByMarker ? val.pieceByMarker : 0.0}
                        onChange={(event) => handleChange(
                          `consumption-${key}-pieceByMarker`,
                          [`consumption-${key}-lbsunit`,
                          `consumption-${key}-sqinchunit`],
                          key,
                          ["lbsunit", "sqinchunit"],
                          "pieceByMarker",
                          event
                        )}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** lbsunit */}
                      <Input
                        id={`consumption-${key}-lbsunit`}
                        type="number"
                        value={val.lbsunit ? val.lbsunit : 0.0}
                        onChange={(event) => handleChange(
                          `consumption-${key}-lbsunit`, 
                          [`consumption-${key}-lbsunitwaste`],
                          key,
                          ["lbsunitwaste"],
                          "lbsunit",
                          event
                          )}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** lbsunitwaste */}
                      <Input
                        id={`consumption-${key}-lbsunitwaste`}
                        type="number"
                        value={val.lbsunitwaste ? val.lbsunitwaste.toFixed(4) : 0.0}
                        onChange={(event) => handleChange(
                          "", [""], key, [""], "", event
                          )}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** sqinchunit */}
                      <Input
                        id={`consumption-${key}-sqinchunit`}
                        type="number"
                        value={val.sqinchunit ? val.sqinchunit.toFixed(4) : 0.0}
                        onChange={(event) => handleChange(
                          `consumption-${key}-sqinchunit`, 
                          [`consumption-${key}-ydsunit`],
                          key,
                          ["ydsunit"],
                          "sqinchunit",
                          event
                        )}
                        min="0.00"
                        max="9999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                    <td>
                      {/** ydsunit */}
                      <Input
                        id={`consumption-${key}-ydsunit`}
                        type="number"
                        value={val.ydsunit ? val.ydsunit.toFixed(4) : 0.0}
                        onChange={(event) => {
                          handleChange(
                          "", [""], key, [""], "", event, checkWaste
                        )
                      console.log('aqui here')
                      }}
                        min="0.00"
                        max="999"
                        step="any"
                        disabled={!quickCosting}
                      >
                      </Input>
                    </td>
                  </tr>
                  </>
                )
              })
            )
          }
          <tr className="text-primary">
            <td colSpan="10"></td>
            <th className="text-primary">{sums.lbsunit.toFixed(2)} lbs</th>
            <th className="text-primary">{sums.lbsunitwaste.toFixed(2)} lbs</th>
            <th className="text-primary">{sums.sqinchunit.toFixed(2)} inch</th>
            <th className="text-primary">{sums.ydsunit.toFixed(2)} yds</th>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

export default ConsumptionCard;

What it can be the problem?