using FormattedMessage in value attribute of input in reactjs

Question

Is there any way I can use FormattedMessage inside value attribute of input in the code below? I tried this, but it didn't work:

<div className='flow_chooser actions'>
     <input disabled={model.isButtonDisabled}
      onClick={() => model.redirectTo(new_event_path(this.locale))}
      className='submit' type="submit" value={<FormattedMessage id="get_started" defaultMessage='Get Started' />}/>
</div>

I also tried to use call back function which worked correctly, but looking for more optimal solution:

<div className='flow_chooser actions'>
        <FormattedMessage id="get_started" defaultMessage='Get Started'>
            {(message: string) => (
            <input
            disabled={model.isButtonDisabled}
            onClick={() => model.redirectTo(new_event_path(this.locale))}
            className='submit'
            type="submit"
            value={message}
            />
            )}
           </FormattedMessage>
</div>

Answer 1

I believe you should be using the imperative approach.

import { useIntl } from 'react-intl';

const intl = useIntl();

<input 
  value={intl.formatMessage({ id="get_started" defaultMessage="Get Started" })} 
/>

Note: Remember to wrap your root (App) with IntlProvider to be able to access the useIntl hook correctly.