import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { IntlProvider } from "react-intl";
import enMessages from "./messages/en.json";

interface Props {
  children?: React.ReactNode;
}

const Bold = (props: Props) => {
  return (
    <div>
      <strong>{props.children}</strong>
    </div>
  );
};

ReactDOM.render(
  <IntlProvider
    locale="en"
    defaultLocale="en"
    messages={enMessages}
    defaultRichTextElements={{
      bold: (chunks) => <Bold>{chunks}</Bold>,
    }}
  >
    <App />
  </IntlProvider>,
  document.getElementById("root")
);

import "./App.css";
import messages from "./messages";
import { FormattedMessage } from "react-intl";

function App() {
  return (
    <div className="App">
      <FormattedMessage {...messages.hello} />{" "}
      <FormattedMessage {...messages.world} />
    </div>
  );
}

export default App;