CODEWITHSUNDEEP
reactjs
mohamed
mohamed

Reputation: 37

how to write html tags inside a react object

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 react 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"
    }
}

Upvotes: 0

Views: 2227

Answers (1)

Abdullah Zaydi
Abdullah Zaydi

Reputation: 124

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, e.t.c. 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.

Upvotes: 2

Related Questions