React dynamically creates custom components

problem description

react if you dynamically load a custom

the environmental background of the problems and what methods you have tried

import { ChartLine, ChartBar } from "../Tool";
const dashBoard = [
  {
    ChartLine: {
      x: 420,
      y: 37,
      width: 326,
      height: 58
    }
  },
  {
    ChartBar: {
      x: 420,
      y: 37,
      width: 326,
      height: 58
    }
  }
];
class EditDash extends Component {
  render() {
    return (
      <div>
        {dashBoard.map((item, key) => {
          console.log(item);
          return "<" + Object.keys(item) + "></" + Object.keys(item) + ">";
        })}
      </div>
    );
  }
}

it doesn"t seem to work like this

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Aug.24,2021

add key to the data

const maps = {
  ChartLine: ChartLine,
  ChartBar: ChartBar,
};

this way you can maintain the original data structure, and key becomes meaningful.

Menu