how to handle apostrophe in react js?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To handle apostrophe ( single quote, or double quote ) in react js, use the ( \ ) Escape characters or ( ` ) Template literals it will handle both types quotes single and double.

Let’s see how Escape characters and Template literals will solve the issue.

let brokenString = 'I'm a broken string';

console.log(brokenString);

// Output
// unknown: Unexpected token (1:24)

brokenString = 'I\'m a broken string';

console.log(brokenString);

// Output
// "I'm a broken string"

brokenString = `I'm a "broken" string`;

console.log(brokenString);

// Output
// `I'm a "broken" string`

Today, I’m going to show you How do I handle apostrophe in react js, as above mentioned, I’m going to use the above-mentioned ( \ ) Escape characters or ( ` ) Template literals.

Let’s start today’s tutorial how do you handle apostrophe in react js?

React js handle apostrophe example using Escape characters

Here, we will take sample string with quote and will use Escape characters to handle quote in string.

import React, { useState, useEffect } from "react";
export default function App() {
  const [str, setStr] = useState("");

  useEffect(() => {
   setStr('I\'m a \"broken\" string');
  }, []);

  return (
    <div className="App">
      <p>{str}</p>
    </div>
  );
}

Output

React js handle apostrophe example using Template literals

Here, we will take sample string with quote and will use Template literals to handle quote in string.

import React, { useState, useEffect } from "react";
export default function App() {
  const [str, setStr] = useState("");

  useEffect(() => {
   setStr(`I'm a "broken" string`);
  }, []);

  return (
    <div className="App">
      <p>{str}</p>
    </div>
  );
}

Output

In the above example, I have put the example to use escape characters and template literals in react js.

I hope it helps you, All the best 👍.