<div id="root"></div>

import React from "https://cdn.skypack.dev/react@17";
import { render } from "https://cdn.skypack.dev/react-dom@17";

const List = ({ isBold = false, type = "disjunction", list = [] }) => {
  if (!list.length) {
    return null;
  }
  const formatter = new Intl.ListFormat("en", {
    style: "long",
    type
  });

  return formatter.formatToParts(list).map(({ type, value }) => {
    return type === "element" && isBold === true ? (
      <strong>{value}</strong>
    ) : (
      <>{value}</>
    );
  });
};

const App = () => {
  const list = ["Dogs", "Cats", "Monkeys", "Rhinos"];
  const list2 = ["Blueberries", "Strawberries", "Bananas"];
  return (
    <div className="app">
      <List isBold={true} list={list} />
      <hr />
      <List list={list} />
      <hr />
      <List isBold={true} type="conjunction" list={list2} />
      <hr />
      <List type="conjunction" list={list2} />
    </div>
  );
};

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