Translate property of jsx element

[boetn]

Hi, I just started using your library and it has been great so far. I do have a feature request / "can I do this question".

I was trying to assign a translated text to the placeholder property of an input element. however I can't seem to get it working.

const placeholder = <Translate id={'search'} />;

return (
     <input type="text" className="form-control" placeholder={placeholder} />
);

This however shows a [object] [Object] placeholder since an object is returned. Is there any way I can accomplish this without moving my complete input element to my translation file?

[ryandrewjohnson]

You need to use the translate function, which can be accessed by either using the Render Props version of <Translate /> or the withLocalize HOC.

Both of these items are outlined in the documentation.

With render props:

return (
  <Translate>
   {({ translate }) => <input type="text" className="form-control" placeholder={translate('search')} />}
 </Translate>
);

[boetn]

Hi @ryandrewjohnson,

Thanks for the reply, I must have misread or misunderstood that one. Thanks a bunch!
ps: Great work.

kind regards

[Cookst3r]

@ryandrewjohnson, Following my previous issue ( #146 (comment), marked as duplicate to this one) I am still unable to return a plain string.

return (
      <Translate>
        {({ translate }) => (
            <option value={translate('salutations.default')}>
              {translate('salutations.default')}
            </option>
        )}
      </Translate>
    );

The issue is passing the translation to the value attribute of the option

dictionary file for the saluations

is giving me error

could you advise if I am doing something wrong please as this seems to be as described in the docs.

Thank you for any help you can provide and apologise if I am missing something simple