How to convert object into string using FormattedMessage to render labels in d3.js chart 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 string.

I am using "react-intl": "2.7.2" for translation , "react-c3js": "^0.1.20", for rendering c3 JS chart

Barchart Code. In this i want labels to be Transalted into different language

     <BarChartWithLine
                          data={this.state.topMerchants}
                          xAxisLable={<InjectIntl/>}
                          yAxisLable="TRANSACTION COUNT"
                          y2AxisLable="SUCCESS RATE"
                          barColor="#6BD0F6"
                          successRateData={
                            this.state.topMerchantsSuccessRate
                          }

In injectIntl file

  const LocalesMenu = ({ intl }) => {
     const placeholder = intl.formatMessage({id: 'transaction.merchantID'});
return (<div>{placeholder}</div>);     
}

I am getting output as [OBJECT OBJECT]

Answer 1

You can use function as child from docs https://github.com/formatjs/react-intl/blob/master/docs/Components.md#formattedmessage

<FormattedMessage id="transaction.merchantID">
    {(text) => (
        <BarChartWithLine
           data={this.state.topMerchants}
           xAxisLable={text}
           yAxisLable="TRANSACTION COUNT"
           y2AxisLable="SUCCESS RATE"
           barColor="#6BD0F6"
           successRateData={
             this.state.topMerchantsSuccessRate
           }
         />
    )}
</FormattedMessage>

if you want trans xAxisLable and yAxisLable too. Just wrap like this. But code now hard to read

<FormattedMessage id="transaction.merchantID">
   {(text) => (
      <FormattedMessage id="transaction.xAxisLable">
         {(text2) => (
            <BarChartWithLine
               data={this.state.topMerchants}
               xAxisLable={text}
               yAxisLable="TRANSACTION COUNT"
               y2AxisLable="SUCCESS RATE"
               barColor="#6BD0F6"
               successRateData={
                 this.state.topMerchantsSuccessRate
               }
            />
          )}
      </FormattedMessage>
   )}
    </FormattedMessage>

I think this code is better, more readable, but a litte tricky. transaction.merchantID is text like this "xAxisLable;yAxisLable;y2AxisLable"

<FormattedMessage id="transaction.merchantID">
   {(text) => {
      const [xAxisLable, yAxisLable, y2AxisLable] = text.split(';')
      return (
      <BarChartWithLine
         data={this.state.topMerchants}
         xAxisLable={xAxisLable}
         yAxisLable={yAxisLable}
         y2AxisLable={y2AxisLable}
         barColor="#6BD0F6"
         successRateData={
           this.state.topMerchantsSuccessRate
         }
      />
        )
    }}
 </FormattedMessage>