0

I have a method named makeGreeting(someData) inside the class component in React as

makeGreeting(person){
   return `${person.firstName} ${person.lastName} - ${person.greetings}`;
}

In the same file inside the render method return section, we have called for ViewGreeting component which is in some other file.this.props.personData we are receiving from another component using user input

  <ViewGreeting
     heading={t("common:GREETING_LEVEL")}
     description={t("common:SOME_ANOTHER_LEVEL", {
                  subject: this.makeGreeting(this.props.personData),
                 })}     
   />

Our ViewGreeting component in some another file is as follows

  <ViewGreeting>
      <h2>{props.heading}</h2>
      <p>{props.description}</p>
   </ViewGreeting>

Now when we give data such as:

firstName: "fn",
lastName: "ln"
greeting: "Hello"

then it prints perfectly in ViewGreeting component as fn ln - hello. but if we give input such as

firstName: "fn",
lastName: "ln"
greeting: "Hello'msg"

or

firstName: "fn",
lastName: "ln"
greeting: "Hello"msg"

means single or double quote inside the greeting message then it prints weird characters in ViewGreeting component as:

fn ln - hello&#39;msg

How should I correct it? I want same greeting in the component as it passed from user input with a single or double quote not these special characters in the Viewgreeting component.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Asis
  • 183
  • 3
  • 15
  • Looks like that `t` function of yours, or react itself, does some html escaping. (Or is it really a `$` instead of a `&`)? This has nothing to do with the template literal backticks. – Bergi Jul 22 '20 at 10:42
  • @Bergi yes it is ```&``` not ```$```. I have changed it. – Asis Jul 22 '20 at 10:45
  • You could sanitize the input in the `onChange` event handler, by replacing `"` with `\"`, for example. – Gh05d Jul 22 '20 at 10:46
  • Does it work if you just pass `description={this.makeGreeting(this.props.personData)}`? If yes, what is the `common:SOME_ANOTHER_LEVEL` translation for your current language? – Bergi Jul 22 '20 at 10:48
  • @Bergi actually common is used for translating the message to different language like: "common" : {"SOME_ANOTHER_LEVEL": "greeting for you {{subject}}"}. We can not remove the common section from here. – Asis Jul 22 '20 at 10:53

0 Answers0