How to convert object into Number or string using FormattedNumber to render in react tooltip using REACTJs?

Question

I am trying to make a application which supports multi language for this Im using react-intl which translates the data. While doing this Im facing a problem that when I am trying to translate it returns me as [OBJECT OBJECT] but im expecting a number or string.

I am using "react-intl": "2.7.2" for translation , "react-tooltip": "3.10.0", for rendering tooltip value

Tooltip Code. In this i want tooltip value to be Transalted into different language numberformat

<div className="column number" 
 data-tip={ <FormattedNumber value= {1234234545465655} />}>
 1234234545465655
</div>

enter image description here

Please find the above image for reference

I am getting output as [OBJECT OBJECT]

Source Code:

import { FormattedMessage,FormattedNumber,formatNumber,injectIntl } from 'react-intl';
    const TDSHighlights = ({
      GlobalData,
      currencySymbol,
      currency,
      props,
    }) => (
         {console.log(props)}
         <div className="column number" 
                  data-tip={num}>
          Tooltip value
         </div>

        );
    export default injectIntl(TDSHighlights);

Added sample code while printing props data not getting props value

Nicholas Tower · Answer 1 · 2019-07-02T14:16:19.460

0

FormattedNumber is a component that tries to render a span (or other elements) to the page. If you just want a function you can call to return a string, instead use formatNumber

import { injectIntl } from 'react-intl';


const SomeComponent = (props) => {
  const num = props.formatNumber(1234);
  //    or with options, as in:
  // const num = props.formatNumber(1234, { style: 'currency', currency: 'USD' });
  return (
    <div className= column number" data-tip={num}>
      Tooltip value
    </div>
  );
}

export default injectIntl(SomeComponent);

edited Jul 02 '19 at 14:16

answered Jul 02 '19 at 12:46

Nicholas Tower

72,740
7
86
98

Oops, it looks like formatNumber has to be passed in as a prop, rather than imported directly. I've updated my example. – Nicholas Tower Jul 02 '19 at 13:36
const num = this.props.formatNumber(1234); Uncaught TypeError: Cannot read property 'props' of undefined @Nicholas Tower – naveen n Jul 02 '19 at 14:06
Are you using a class component or a functional component? – Nicholas Tower Jul 02 '19 at 14:13
am using functional component – naveen n Jul 02 '19 at 14:14
Then the syntax for class components will of course not work for you. I've converted my example to a functional component. – Nicholas Tower Jul 02 '19 at 14:15
i have tried class component also not working , getting same error @Nicholas Tower – naveen n Jul 02 '19 at 14:22
If you have some code you'd like me to help debug, please share it. Otherwise, i'm sorry my solution didn't work for you. – Nicholas Tower Jul 02 '19 at 14:41
Added sample code in the question , please check @Nicholas Tower – naveen n Jul 02 '19 at 14:58
What i called `props` is the entire props object. You're using destructuring to pluck individual properties off of props. It's perfectly fine if you want to use destructuring, you just need to update your variable names to match. `const TDSHighlights = ({ GlobalData, currencySymbol, currency, formatNumber }) => {` – Nicholas Tower Jul 02 '19 at 15:18

How to convert object into Number or string using FormattedNumber to render in react tooltip using REACTJs?

1 Answers1