将 .then() 内部的解析字符串作为 JSX 元素导出到外部

Question

In react I import these following libraries

import React from "react";
import {
  Container,
  Row,
  Col,
  Card,
  CardBody,
  CardFooter,
  Badge,
  Button
} from "shards-react";

inside the functions, I have the following fetch method and inside .then() I add JSX elements

     output=''
fetch(
          "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@MediumStaff"
        )
          .then(res => res.json())
          .then(data => {
            const res = data.items; 

            let a = 0;
            res.forEach(item => {

              if (a === 0 || a === 3 || a === 6 || a === 9) {
                output += `<Row>`;
              }

              output += `<Col lg="6" md="6" sm="12" className="mb-4">
                <Card small className="card-post card-post--1">
                  <div
                    className="card-post__image"
                    style={{ backgroundImage: "url("+"${item.thumbnail}"+")" }}
                  >
                  </div>
                  <CardBody>
                  //JSX elements
                  </CardBody>
                </Card>
                </Col>`;
              if (a === 2 || a === 5 || a === 8 || a === 9) {
                output += `</Row>`;
              }

              a += 1;
            });

            document.querySelector(".blog__slider").innerHTML = output;
            console.log(output);

          });

In return I used the following code

<div className="blog__slider"></div>

I thought the functional component in React did not take output values as JSX components. If I get update output value outside of .then() I could use dangerouslySetInnerHTML={{__html: output}}

Answer 1

create a class component and add an array state inside the constructor of that class component. because when the class created that state will initiate. Using React Life cycle method componentDidMount fetch the JSON objects and push the JSON objects into the array state then you can use the JSX element in the render method

codesandbox.io/s/twilight-breeze-plbby