React-Intl pass translation as string variable and not object

Question

I'm in the process of adding react-intl to a payment app I'm building but hitting a snag. I apologize if this has been addressed somewhere. I scoured the issues and documentation and couldn't find a direct answer on this (probably just overlooking it).

Use Case: Once a payment is processed I'd like to give the user the option to tweet a translated message indicating they've donated.

Problem: Twitter uses an iframe to "share tweets", and requires a text field as a string variable. When I pass my translation I get [object Object] in the tweet instead of the translated text. This makes sense based on my understanding of the translation engine. But I cant seem to find a way to pass a string rather than a translation object.

what I get when I use `{translate('example_tweet')}`

const translationText = object

what I need

const translationText = 'this is the translated text'

Question

How do I get the translated text as a string variable rather than an object to be rendered on a page?

Code

button

import { Share } from 'react-twitter-widgets'
import translate from '../i18n/translate'

export default function TwitterButton () {
  return (
    <Share
      url='https://www.sampleSite.org' options={{
        text: {translate('example_tweet')},
        size: 'large'
      }}
    />
  )
}

translate

import React from 'react'
import { FormattedMessage } from 'react-intl'

const translate = (id, value = {}) => <FormattedMessage id={id} values={{ ...value }} />

export default translate

score 0 · Answer 1 · answered Jun 16 '20 at 15:49

I was able to solve it without messing with react-intl. I built a function that scrapes the text I need from the page itself. So it really doesnt matter what the language is. I was hoping to figure out how to snag the translations as variables, but this gets the job done.

function makeTweetableUrl (text, pageUrl) {
    const tweetableText = 'https://twitter.com/intent/tweet?url=' + pageUrl + '&text=' + encodeURIComponent(text)
    return tweetableText
  }

function onClickToTweet (e) {
    e.preventDefault()
    window.open(
      makeTweetableUrl(document.querySelector('#tweetText').innerText, pageUrl),
      'twitterwindow',
      'height=450, width=550, toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'
    )
  }

function TwitterButton ({ text, onClick }) {
  return (
    <StyledButton onClick={onClick}>{text}</StyledButton>
  )
}