How to render an object value that is Html in react jsx?-CodePudding

New to React here. Might be a n00b q but doing a project where I'm trying to build a recipe app and the api I'm using retrieves an object with this value:

<ol>
  <li>Place ingredients in a high speed blender like Blendtec for super smooth texture, blend on high.</li>
  <li>If using a regular blender put milk and strawberries in then blend.</li>
  <li>Next, add banana pieces and peanut butter, process until smooth.</li>
  <li>Garnish with crushed peanuts and serve.</li>
</ol>

How would I render it to make the ordered list and unordered list appear on my browser while using Jsx in React? Cause right now it is displaying as such when I render the data from the state object.

Thank you!!

CodePudding user response：

You can use dangerouslySetInnerHTML like this,

const yourString = `<ol><li>Place ingredients in a high speed blender like Blendtec for super smooth texture, blend on high.</li><li>If using a regular blender put milk and strawberries in then blend.</li><li>Next, add banana pieces and peanut butter, process until smooth.</li><li>Garnish with crushed peanuts and serve.</li></ol>`

<p dangerouslySetInnerHTML={{ __html: yourString }}></p>

CodePudding user response：

You could parse the list using the DOMParser object's parseFromString method.

const { useEffect, useState } = React;

const fetchIngredients = () => Promise.resolve(`
<ol>
  <li>Bananas</li>
  <li>Peanut Butter</li>
  <li>Peanuts</li>
</ol>
`);

const fetchInstructions = () => Promise.resolve(`
<ol>
  <li>Place ingredients in a high speed blender like Blendtec for super smooth texture, blend on high.</li>
  <li>If using a regular blender put milk and strawberries in then blend.</li>
  <li>Next, add banana pieces and peanut butter, process until smooth.</li>
  <li>Garnish with crushed peanuts and serve.</li>
</ol>
`);

const parser = new DOMParser();

const parseHtmlString = (htmlString) =>
  parser.parseFromString(htmlString, 'text/html');

const parseHtmlList = (htmlListString) =>
  [...parseHtmlString(htmlListString).querySelectorAll('li')]
    .map((li) => li.innerText);

const Recipe = () => {
  const [ingredients, setIngredients] = useState([]);
  const [instructions, setInstructions] = useState([]);
  
  useEffect(() => {
    fetchIngredients().then((htmlString) => {
      setIngredients(parseHtmlList(htmlString));
    });
    fetchInstructions().then((htmlString) => {
      setInstructions(parseHtmlList(htmlString));
    });
  }, []);
  
  return (
    <div className="Recipe">
      <h1>Recipe</h1>
      <h2>Ingredients</h2>
      <ol>
        {ingredients.map(ingredient => (
          <li key={ingredient}>{ingredient}</li>
        ))}
      </ol>
      <h2>Instructions</h2>
      <ol>
        {instructions.map(instruction => (
          <li key={instruction}>{instruction}</li>
        ))}
      </ol>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      <Recipe />
    </div>
  );
};

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>