Hi Friends đź‘‹,

Welcome To Infinitbility! ❤️

To handle apostrophe ( single quote, or double quote ) in react native, 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 native, 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 native?

React native 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";
import { Text, View } from 'react-native';
export default function App() {
  const [str, setStr] = useState("");

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

  return (
    <View>
      <Text>{str}</Text>
    </View>
  );
}

Output

React Native, handle quotes example
React Native, handle quotes example

Try it yourself

React native 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";
import { Text, View } from 'react-native';
export default function App() {
  const [str, setStr] = useState("");

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

  return (
    <View>
      <Text>{str}</Text>
    </View>
  );
}

Output

React Native, handle quotes example
React Native, handle quotes example

Try it yourself

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

I hope it helps you, All the best đź‘Ť.