Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Converting number to words in React.js

Trying to convert numbers to words. It converts non-decimal numbers, but when it comes to decimals it shows undefined for decimal parts like for number e.g. 118.65. It shows undefined rupees only instead of one hundred eighteen rupees and sixty five paisa only.

  • Input given: 118.65
  • Actual output: one hundred unedined rupees only
  • Expected output: one hundred eighteen Rupees and sixty five paisa only
function App() {
  return <Textword grandtotalAmount={118.65} />;
}

function Textword({ grandtotalAmount }) {
  const convertNumberToWords = (number) => {
    const units = [
      "",
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine",
    ];
    const tens = [
      "",
      "Ten",
      "Twenty",
      "Thirty",
      "Forty",
      "Fifty",
      "Sixty",
      "Seventy",
      "Eighty",
      "Ninety",
    ];
    const teens = [
      "Ten",
      "Eleven",
      "Twelve",
      "Thirteen",
      "Fourteen",
      "Fifteen",
      "Sixteen",
      "Seventeen",
      "Eighteen",
      "Nineteen",
    ];
    const crore = "Crore";
    const lakh = "Lakh";
    const arab = "Arab";
    const currency = "Rupees";
    const paisa = "Paisa";
    
    if (number === 0) {
      return "Zero " + currency;
    }

    let words = "";
    
    if (number >= 1000000000) {
      words +=
        convertNumberToWords(Math.floor(number / 1000000000)) +
        " " +
        arab +
        " ";
      number %= 1000000000;
    }
    if (number >= 10000000) {
      words +=
        convertNumberToWords(Math.floor(number / 10000000)) + " " + crore + " ";
      number %= 10000000;
    }

    if (number >= 100000) {
      words +=
        convertNumberToWords(Math.floor(number / 100000)) + " " + lakh + " ";
      number %= 100000;
    }

    if (number >= 1000) {
      words += convertNumberToWords(Math.floor(number / 1000)) + " Thousand ";
      number %= 1000;
    }

    if (number >= 100) {
      words += convertNumberToWords(Math.floor(number / 100)) + " Hundred ";
      number %= 100;
    }

    if (number >= 20) {
      words += tens[Math.floor(number / 10)] + " ";
      number %= 10;
    } else if (number >= 10) {
      console.log(number);
      words += teens[number - 10] + " ";
      number = 0;
      console.log(words);
    }

    if (number > 0) {
      words += units[number] + " ";
    }
    const decimalPart = Math.round((number % 1) * 100);
    console.log(decimalPart);
    if (decimalPart > 0) {
      words += "and" + decimalPart + " " + paisa + "only ";
    }
    
    console.log(words);
    return words.trim() + " ";
  };

  let grandTotal = grandtotalAmount; // Example value
  let amountWord = convertNumberToWords(grandTotal);
  console.log(amountWord);
  return <React.Fragment>{amountWord}</React.Fragment>;
}

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App />);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
Tags:

2

Answers


  1. 0

    The following modifications should take place:

    • The words field should be an array
    • You can move the convertNumberToWords outside of the component
    • The convertNumberToWords will need an inner recursive function that considers its own words
    • You can reuse the inner convert to handle the decimal portion

    Here is a working example:

    function App() {
  return (
    <div>
      <ul>
        <li><Textword grandtotalAmount={0} /></li>
        <li><Textword grandtotalAmount={0.69} /></li>
        <li><Textword grandtotalAmount={118.65} /></li>
        <li><Textword grandtotalAmount={987654321.42} /></li>
      </ul>
    </div>
  );
}

function Textword({ grandtotalAmount }) {
  return <div>{convertNumberToWords(grandtotalAmount)}</div>;
}

const units = ["", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"];
const tens = ["", "Ten", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
const teens = ["Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen"];

const zero = "Zero";
const arab = "Arab";
const crore = "Crore";
const lakh = "Lakh";
const thousand = "Thousand";
const hundred = "Hundred";
const currency = "Rupees";
const paisa = "Paisa";
const only = "Only";

function convertNumberToWords(amount) {
  if (amount === 0) return `${zero} ${currency} ${only}`;
  
  function convert(num) {
    let parts = [];
    if (num >= 1e9) {
      parts.push(`${convert(Math.floor(num / 1e9))} ${arab}`);
      num %= 1e9;
    }
    if (num >= 1e7) {
      parts.push(`${convert(Math.floor(num / 1e7))} ${crore}`);
      num %= 1e7;
    }
    if (num >= 1e5) {
      parts.push(`${convert(Math.floor(num / 1e5))} ${lakh}`);
      num %= 1e5;
    }
    if (num >= 1000) {
      parts.push(`${convert(Math.floor(num / 1000))} ${thousand}`);
      num %= 1000;
    }
    if (num >= 100) {
      parts.push(`${convert(Math.floor(num / 100))} ${hundred}`);
      num %= 100;
    }
    if (num >= 20) {
      parts.push(`${tens[Math.floor(num / 10)]}`);
      if (num % 10 > 0) parts.push(units[num % 10]);
    } else if (num >= 10) {
      parts.push(`${teens[num - 10]}`);
    } else if (num > 0) {
      parts.push(`${units[num]}`);
    }
    return parts.join(" ");
  }

  let integerPart = Math.floor(amount);
  let wholeWordPart = convert(integerPart);
  let result = wholeWordPart ? `${wholeWordPart} ${currency}` : '';

  let decimalPart = Math.round((amount - integerPart) * 100);
  if (decimalPart > 0) {
    if (wholeWordPart) {
      result += " and ";
    }
    result += `${convert(decimalPart)} ${paisa}`;
  }

  return `${result} ${only}`;
}

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App />);
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
  2. 0

    I think you can use number-to-words module.

    pleaze check this url of number to words module.

    This is an example:

    var converter = require('number-to-words');
converter.toWords(13); // => “thirteen”
 
// Decimal numbers:
converter.toWords(2.9); // => “two”
 
// Negative numbers:
converter.toWords(-3); // => “minus three”
 
// Large numbers:
converter.toWords(9007199254740992); // => “nine quadrillion, seven trillion, one hundred ninety-nine billion, two hundred fifty-four million, seven hundred forty thousand, nine hundred ninety-two”
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search