React replace placeholder characters with react element

Question

I have a REACTSjs application and am trying to solve a problem with localization. I receive some text from the API in which there are some special characters marking the text that should be localized. Something like this: This is a translated text: [labels.example]. Awesome! I am using react-redux-localize to translate the keys so the result should look like this: This is a translated text: . Awesome! I tried solving this problem with renderHTML from react-render-html: function localizeNames(text) { text = text.replace("[", ""); return text; } and calling this function in my render function:

{renderHTML(localizeNames(text))}

but it throws an exception: Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. Can anybody help me with this use-case? I am quite new to javascript. JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

I assume that renderHTML from the react-render-html package does not instantiate React components from a text string and therefore turns the tag into an invalid HTML element, which in turn gets detected by the React framework as unrecognized. You need to roll your own function that transforms your API's response into React components. The following function uses a regular expression for finding your API's language tags and splitting the input text into an array of React-compatible text pieces and component instances // This is just to make this code snippet work const Translate = () => 1; function toReactTranslate(text) { let langTagRegex = /\[([\w\.]+)\]/g let result = []; let nextStart = 0; let tagMatch; do { tagMatch = langTagRegex.exec(text); if (tagMatch) { let id = tagMatch[1]; let before = text.substring(nextStart, tagMatch.index); if (before) { result.push(before); } // Add React Translate component to result result.push(); nextStart = tagMatch.index + tagMatch[0].length; } } while(tagMatch); if (nextStart) { let after = text.substr(nextStart); if (after) { result.push(after); } } return result.length ? result : text; } let text = "This is a translated text: [labels.example]. Awesome!"; document.write(JSON.stringify(toReactTranslate(text))); Run code snippetExpand snippet