diff --git a/src/components/Questions/QuestionCard.tsx b/src/components/Questions/QuestionCard.tsx index ef1b8f141..067fcbc7e 100644 --- a/src/components/Questions/QuestionCard.tsx +++ b/src/components/Questions/QuestionCard.tsx @@ -94,7 +94,7 @@ export function QuestionCard(props: QuestionCardProps) { > {!question.isLongAnswer && (
p]:leading-snug sm:text-xl`} + className={`mx-auto flex max-w-[600px] flex-grow flex-col items-center justify-center py-0 px-5 text-center text-base [&>p]:leading-relaxed sm:text-xl`} dangerouslySetInnerHTML={{ __html: markdownToHtml(question.answer, false), }} diff --git a/src/data/question-groups/react/content/ref-forwarding.md b/src/data/question-groups/react/content/ref-forwarding.md index e0edab34a..05b73b61a 100644 --- a/src/data/question-groups/react/content/ref-forwarding.md +++ b/src/data/question-groups/react/content/ref-forwarding.md @@ -1,6 +1,6 @@ By default, each component’s DOM nodes are private. However, sometimes it’s useful to expose a DOM node to the parent—for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`: -```jsx +```javascript import { forwardRef } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { @@ -16,7 +16,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { You will receive a `ref` as the second argument after props. Pass it to the DOM node that you want to expose: -```jsx +```javascript import { forwardRef } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { @@ -32,7 +32,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { This lets the parent Form component access their `` DOM node exposed by `MyInput`: -```jsx +```javascript function Form() { const ref = useRef(null);