how to write html tags inside javascript object

Question

I am trying to create a multi-language website so am using objects and arrays to achieve that however, I want to add span tags inside the js objects. I tried backticks but it's not working

let content = {
    english:{
        title:"Welcome to G-tech",
        text:'is an Electronics repair shop specializing in Computer, Phone, and Tablet repairs.',
        button:"mail-in"
    },
    francais:{
        title: 'Welcome to G-tech',
        text:'Il s'agit d'un atelier de réparation d'appareils électroniques spécialisé dans la réparation d'ordinateurs, de téléphones et de tablettes. ',
        button:"mail-in"
    },
    arab:{
        title: 'g-tech مرحبا بكم في ',
        text:'هو خدمة لتصليح الهواتف والحواسيب '
        button:"mail-in"
    }
}

Answer 1

You can simply add tags without any backticks or any other thing. In react, You can save JSX Elements as if they are string, numbers, etc. Because JSX elements are a part of react applications. So I guess it's not really hard to add to add span tag to your text property.

function MultiLingualParagraphs() {
  const [multiLingualData, setMultiLingualData] = useState([
    {
      language: "English",
      title: "Welcome to G-tech",
      text: (
        <span>
          is an <strong>Electronics</strong> repair shop specializing in
          Computer, Phone, and Tablet repairs.
        </span>
      ),
      button: "mail-in"
    },
    {
      language: "francais",
      title: "Welcome to G-tech",
      text: (
        <span>
          Il s'agit d'un <strong>atelier</strong> de réparation d'appareils
          électroniques spécialisé dans la réparation d'ordinateurs, de
          téléphones et de tablettes.
        </span>
      ),
      button: "mail-in"
    },
    {
      language: "Arabic",
      title: "g-tech مرحبا بكم في ",
      text: (
        <span>
          هو خدمة لتصليح الهواتف والحوا<strong>سيب</strong>
        </span>
      ),
      button: "mail-in"
    }
  ]);

  return multiLingualData.map((v, i) => (
    <div className="App">
      <h2>{v.language}</h2>
      <hr />
      <h4>{v.title}</h4>
      <p>{v.text}</p>
      <button>{v.button}</button>
      <hr />
    </div>
  ));
}

You can see working demo of this on this CodeSandbox .

To learn more about JSX Elements and Babel Compiler . Check this link .