'How to resolve React-Jsx/html input error -$NaN.undefined

enter image description hereenter image description hereI'm having a bit of an issue implementing an input field that will take a number which is subtracted from another computed value within an html table setup. I observed that when i type any 3 digit number as VAT, Everything works fine, but soon as i type beyond 3 digit, i get "$NaN.undefined"

I want to know what i'm missing here, would appreciate an help. I added type='number' thinking that would help, but it didnt. I also run the code without the 'toMoney()' function, it still throws the same error. I tried changing type to text, same result still.

  const [rfq, setRfq] = useState({
    rate_1: '',
    rate_2: '',
    ..............// rest of code
  });

 useEffect(() => {
    // fetch data from an API based on ID here
    if (!data.length) {
      axios
        .get(`url`)

        .then(
          (res) => {
            setData(res.data);
          },
          (err) => {
            alert('An error occured! Try refreshing the page.', err);
          }
        );
    }
  }, [data.length, id]);

  const toMoney = (value) => {
    return accounting.formatMoney(accounting.unformat(value), {
      symbol: '',
      precision: 2,
    });
  };

return (
 {data &&
          data.map((quote) => (

.............................// rest of code
 <table class="balance">
                  <tr>
                    <th>
                      <span contenteditable>Sub-Total</span>
                    </th>
                    <td>
                      <span data-prefix>$</span>
                      <span>
                        {toMoney(
                          rfq.rate_1 * quote.quantity_1 +
                            rfq.rate_2 * quote.quantity_2 +
                            rfq.rate_3 * quote.quantity_3 +
                            rfq.rate_4 * quote.quantity_4 +
                            rfq.rate_5 * quote.quantity_5 +
                            rfq.rate_6 * quote.quantity_6
                        )}
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      <span contenteditable>VAT</span>
                    </th>
                    <td>
                      <span data-prefix></span>
                      <span>
                        <input
                        type='number'
                          style={{ textAlign: 'right' }}
                        //   value={rfq.vat}
                          name="vat"
                          onChange={handleChange}
                        />
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      <span contenteditable>Total</span>
                    </th>
                    <td>
                      <span data-prefix>$</span>
                      <span>
                        {toMoney(
                          parseInt(rfq.rate_1 * quote.quantity_1) +
                            parseInt(rfq.rate_2 * quote.quantity_2) +
                            parseInt(rfq.rate_3 * quote.quantity_3) +
                            parseInt(rfq.rate_4 * quote.quantity_4) +
                            parseInt(rfq.rate_5 * quote.quantity_5) +
                            parseInt(rfq.rate_6 * quote.quantity_6) -
                            toMoney(rfq.vat)
                        )}
                      </span>
                    </td>
                  </tr>
                </table>
)}
)
}


[![with 3 digit][1]][1]
htmlreactjs


Solution 1:[1]

I just figured out the mistake.

I replaced this

 {toMoney(
                          parseInt(rfq.rate_1 * quote.quantity_1) +
                            parseInt(rfq.rate_2 * quote.quantity_2) +
                            parseInt(rfq.rate_3 * quote.quantity_3) +
                            parseInt(rfq.rate_4 * quote.quantity_4) +
                            parseInt(rfq.rate_5 * quote.quantity_5) +
                            parseInt(rfq.rate_6 * quote.quantity_6) -
                            toMoney(rfq.vat) //here is the error
                        )}

with

 {toMoney(
                          parseInt(rfq.rate_1 * quote.quantity_1) +
                            parseInt(rfq.rate_2 * quote.quantity_2) +
                            parseInt(rfq.rate_3 * quote.quantity_3) +
                            parseInt(rfq.rate_4 * quote.quantity_4) +
                            parseInt(rfq.rate_5 * quote.quantity_5) +
                            parseInt(rfq.rate_6 * quote.quantity_6) -
                            parseInt(rfq.vat)   //replaced toMoney with parseInt 
                        )}

Finally, I changed the initial state to 0 ; vat:"" to vat:0. that fixed it

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 8SINS

Related Questions