Rendering html response from API

Apply styles on <p> and <li> tag

const apiResponse = {
    description:
      '<p>fgsdgsdgsdgsd</p><ol style="list-style-type: lower-greek;"><li>hgdj</li><li>fdjkhsdkjgh</li><li>fgvf</li></ol>',
  };

  const renderHTML = (htmlString) => {
    return { __html: htmlString };
  };

return (
<>
        <div dangerouslySetInnerHTML={renderHTML(apiResponse.description)} />
        {/* Apply custom styles for <p> and <li> here */}
        <style jsx>{`
          p {
            /* Your custom styles for <p> */
            color: blue;
            font-size: 16px;
          }

          li {
            /* Your custom styles for <li> */
            font-weight: bold;
            color: green;
          }
        `}</style>
      </div>
</>
)

এখানে ট্যাগ গুলোর উপর স্টাইল এপ্লাই করা হয়েছে, কিন্তু আমাদের renderHTML এর p এন্ড li ট্যাগ স্টাইল পাওয়ার কথা কিন্তু কম্পোনেন্ট এ সব p,li ট্যাগ এই স্টাইল পাচ্ছে। এই প্রব্লেমটা নিচে সল্ভ করে দেওয়া হলো।

Here the style is applied to the tags, but our renderHTML is supposed to get the p and li tag style but all the p, li tags in the component are getting this style. This problem is solved below.

Apply custom styles for <p> and <li> inside the "styled-content" class

const apiResponse = {
    description:
      '<p>fgsdgsdgsdgsd</p><ol style="list-style-type: lower-greek;"><li>hgdj</li><li>fdjkhsdkjgh</li><li>fgvf</li></ol>',
  };

  const renderHTML = (htmlString) => {
    return { __html: htmlString };
  };

return (
<>
       <div>
        <div
          className="styled-content"
          dangerouslySetInnerHTML={renderHTML(apiResponse.description)}
        />

        {/* Apply custom styles for <p> and <li> inside the "styled-content" class */}
        <style jsx>{`
          .styled-content p {
            /* Your custom styles for <p> inside .styled-content */
            color: blue;
            font-size: 16px;
          }

          .styled-content li {
            /* Your custom styles for <li> inside .styled-content */
            font-weight: bold;
            color: green;
          }
        `}</style>

        <div
          dangerouslySetInnerHTML={{ __html: offerData?.data[0]?.description }}
        />

        <p>Lorem ipsum dolor sit.</p>
      </div>
</>
)

Apply selectively render only specific tag

you can use the dangerouslySetInnerHTML prop to render HTML content, but if you want to selectively render only specific tags, you can use a more controlled approach by parsing the HTML and then filtering out the elements you don't want to render.

Here's an example of how you can achieve this in your component:

const MyComponent = () => {
  const apiResponse = {
    description: "<p>fgsdgsdgsdgsd</p><ol style=\"list-style-type: lower-greek;\"><li>hgdj</li><li>fdjkhsdkjgh</li><li>fgvf</li></ol>",
  };

  const renderHTML = (htmlString) => {
    // Parse the HTML string to a DOM object
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');

    // Filter out paragraphs and keep only the ordered list
    const olElement = doc.querySelector('ol');

    // Check if olElement exists before rendering
    return olElement ? { __html: olElement.outerHTML } : null;
  };
// ====================== shortcut =============================================
const renderHTML = (htmlString) => ({
    __html:
      (
        new DOMParser()
          .parseFromString(htmlString, 'text/html')
          .querySelector('ol') || {}
      ).outerHTML || null,
  });
// ===============================================================================

  return (
    <div>
      <div className="styled-content" dangerouslySetInnerHTML={renderHTML(apiResponse.description)} />

      {/* Apply custom styles for <li> inside the "styled-content" class */}
      <style jsx>{`
        .styled-content li {
          /* Your custom styles for <li> inside .styled-content */
          font-weight: bold;
          color: green;
        }
      `}</style>

      {/* Other content */}
      <div dangerouslySetInnerHTML={{ __html: offerData?.data[0]?.description }} />
      <p>Lorem ipsum dolor sit.</p>
    </div>
  );
};

export default MyComponent;