CODEWITHSUNDEEP
javascriptreactjsreact-native
Janck
Janck

Reputation: 57

React render component inside a JSX argument

I have a system for translations that returns a correct translation based on a key. And this is all handled by a component Translate:

import React from 'react';

const Translate = ({ ln }) => {

    return <span>{language[ln]}</span>
};

export default Translate;

the problem is that when I try to use it inside a for example:

<input type="text" placeholder=<Translate ln="text_input" /> />

The problem is that component has not returned - executed when I insert it into the <input />, that means that my placeholder will always be [object Object], is there any way to solve this?

Upvotes: 1

Views: 433

Answers (2)

Oleksandr T.
Oleksandr T.

Reputation: 77482

You can't pass to placeholder React component, because to placeholder you should pass String not Object or String that contains tags., I think in this case better split Translate to couple functions, and use it in Translate component and as just a function that returns right translation by key, like so 

const translate = (key) => {
  // Some code ... 
  return language[ln];
}; // returns string

const Translate = ({ ln }) => {
  return <span>{ translate(ln) }</span>
}; // return React component

<input 
  type="text" 
  placeholder={ translate('some key') } /> // pass string to placeholder

Upvotes: 1

Philipp Fromme
Philipp Fromme

Reputation: 111

Why are you using a component for translating a string in the first place? I think this isn't good seperation of concerns and makes your translator less reusable.

Just use a function for that like

<input type="text" placeholder={t('text')} />

You could for example use something like i18next for translation like

<input type="text" placeholder={i18next.t('text')} />

Upvotes: 1

Related Questions