title: How to render html tags as html tags instead of string if they are coming from an array in React Component?
body: <p>For example, I have an array of 3 values in it. The values also have some html tags. When I try to map through that array and try to display each of my array item, the values are displayed as it is. I want the HTML tags in my array values to be executed as true html elements. Below is my App.js code of my sample react app:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const App = () =&gt; {
    const [questions, setQuestions] = useState([
      "&lt;h1&gt;Test 1&lt;/h1&gt;",
      "&lt;h1&gt;Test 2&lt;/h1&gt;",
      "&lt;h1&gt;Test 3&lt;/h1&gt;",
    ]);
  
    return (
      &lt;div&gt;
        {questions.map((question) =&gt; (
           &lt;div&gt;{question}&lt;/div&gt;
        ))}
      &lt;/div&gt;
    );
  };
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>The above react component give me my output as following:</p>
  <pre><code>&lt;h1&gt;Test 1&lt;/h1&gt;
  &lt;h1&gt;Test 2&lt;/h1&gt;
  &lt;h1&gt;Test 3&lt;/h1&gt;
  </code></pre>
  <p>However, I want my final output to be look like below in which the html h1 tags are applied on my array elements when displayed in the browser. I know if I write such sort of html tags in a vanilla javascript, the html page renders it correctly by automatically reading any html tags as true html tags but I dont know how to achieve it in React Component.</p>
  <p><strong>Test 1</strong></p>
  <p><strong>Test 2</strong></p>
  <p><strong>Test 3</strong></p>