Объект отображается вместо html

Question

Я пытаюсь заменить некоторые подстроки в виде обычного текста на html и отобразить их обратно пользователю.

У меня сейчас настроено следующее, но оно всегда отображает [Object object] вместо html TextField.

import React, { useState } from "react";

import TextField from "@material-ui/core/TextField";

const CTextField = (
  <TextField id="outlined-basic" variant="outlined" />
);

function getAll(sourceStr) {
  return sourceStr.replace(/{_}/gi, CTextField);
}

export default function Parse(props) {
  const data = getAll(props.data);
  return (
    <div className={classes.root}>
        <div dangerouslySetInnerHTML={{ __html: data }}></div>
        {data}
    </div>
  );
}

Я видел много подобных вопросов, но я пробовал их и не работал. Я попытался установить его как массив [], но все равно получил его. Я даже оставляю dangerouslySetInnerHTML в этом, чтобы показать, что он все еще не работает.

Answer 1

, используя JSON.stringify(nameOfObject), чтобы показать все ключи и значение object, когда вы хотите показать