React create element props is undefined

Question

I have a generic ListComponent function

function ListComponent() {
    return React.createElement(
      "ul",
      { className: "list" },
      items.map((item, i) => React.createElement("li", {key: i}, item))
    );
  }

Now I want to pass an array to that component as props and render it:

const vacations = ["Spain", "Greece", "Vietnam"];
const VacationsList = React.createElement(ListComponent, {items: vacations}, null);

ReactDOM.render(VacationsList, document.getElementById("root"));

I am getting the ReferenceError "items is not defined". How can I fix this?

Answer 1

You have to recieve the items like

function ListComponent({ items }) {
    return React.createElement(
      "ul",
      { className: "list" },
      items.map((item, i) => React.createElement("li", {key: i}, item))
    );
  }