2

I have a component that takes a number. <ClickableNumber num={num} />

I'm getting this number from my language pack with a FormattedMessage
<ClickableNumber num={<FormattedMessage id="native_number" />} />

when I console log num inside ClickableNumber it is an object.

How do I get the string or number version of the value from <FormattedMessage id="native_number" />?

I can get the value if I used intl.formatMessage({ id: 'native_number' }) but I'm trying to reuse the ClickableNumber and do not want to wrap each component that uses this component in injectIntl

Turnipdabeets
  • 5,815
  • 8
  • 40
  • 63
  • Possible duplicate of [How to pass in a react component into another react component to transclude the first component's content?](https://stackoverflow.com/questions/25797048/how-to-pass-in-a-react-component-into-another-react-component-to-transclude-the) – jmargolisvt Oct 02 '17 at 16:51
  • @jmargolisvt I think this is pretty specific to react-intl library – Turnipdabeets Oct 02 '17 at 16:52
  • "I'm getting this number from my language pack with a FormattedMessage". It would deffinetely help If you showed where this number is coming from. – Tomasz Mularczyk Oct 02 '17 at 17:10
  • Sounds like you might want to use the react-intl api to format the number yourself instead of using the component https://github.com/yahoo/react-intl/wiki/API#formatnumber. – Levsero Oct 02 '17 at 20:20

1 Answers1

0

I've never used react-intl so I don't know if its gonna work or not but it should work in concept.

What you can do is that create a utility function that will return the desired result. For this situation intl.formatMessage({ id: 'native_number' }) and the formatted Component. 

const getNativeNumber = () => {
   // I don't know how but you can get the number here
   // something like
   const nativeNumber = intl.formatMessage({ id: 'native_number' });
   return {
     component: <FormattedMessage id="native_number" />,
     nativeNumber: nativeNumber
   }
}

<ClickableNumber num={getNativeNumber()} />

console.log(this.props.num.nativeNumber)  // This will have the native number in your ClickableNumber component.
bennygenel
  • 23,896
  • 6
  • 65
  • 78