HomePage.tsx.diff

import React from "react";
import { useLocaleStrings, LocaleString } from "./StringsContext";

export default function HomePage(): React.ReactElement {
  const { getString } = useLocaleStrings();
 
  return (
    <div>
      <h1>Home</h1>
-     <p>{getString("homePageContent.para1")}</p>
+     <p>{getString("homePageContent.para1", { name: "John Doe 1" })}</p>
-     <LocaleString strKey="homePageContent.para2" as="p" />
+     <LocaleString
+       strKey="homePageContent.para2"
+       as="p"
+       variables={{ name: "World!" }}
+     />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
        optio, fuga cum velit corporis ipsam labore saepe assumenda inventore
        nobis. Laboriosam, cumque blanditiis minima accusantium inventore
        mollitia dolor optio exercitationem?
      </p>
    </div>
  );
}