Issue with Custom Input Component in React MDX

[hakimasyrofi]

I'm experiencing an issue with a custom input component in my React MDX setup. The input field, which is connected to a React hook for its value and onChange, only accepts one character at a time.

I suspect this behavior is related to how the state is being updated and the component's rendering process. It seems that the component might be re-rendering in a way that causes the input to lose focus, preventing users from typing multiple characters.

Has anyone encountered a similar issue or have any suggestions for resolving this? Any insights would be greatly appreciated!

Page.tsx

import MDXRender from "./TestRender.tsx";

// MDX content with placeholders for inputs
const mdxContent = `
# Hello MDX!

This is an example of MDX content __1__.

| Name | Type   | Description         |
| ---- | ------ | ------------------- |
| name | __2__  | Name of the resource|
| path | string | __3__              |
| name | __4__  | Name of the resource|
| path | string | __5__              |
`;

const MDXDisplay = () => {
  return <MDXRender mdxContent={mdxContent} />;
};

export default MDXDisplay;

TestRender.tsx

import { MDXProvider } from "@mdx-js/react";
import * as runtime from "react/jsx-runtime";
import React, { useState, useEffect } from "react";
import { evaluate } from "@mdx-js/mdx";
import { Table, TableCell, TableHeaderCell, TableRow } from "./table";
import remarkGfm from "remark-gfm";

// Component for input fields based on question numbers
const FillInTheBlank = ({
  questionNumber,
  value,
  onChange,
}: {
  questionNumber: number;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) => (
  <input
    type="text"
    placeholder={`Answer ${questionNumber}`}
    value={value}
    onChange={onChange}
    style={{
      border: "1px solid #ccc",
      padding: "4px",
      margin: "0 4px",
    }}
  />
);

// Function to process the MDX content and replace placeholders with question numbers
const processContent = (mdxContent: string) => {
  return mdxContent.replace(/__(\d+)__/g, (_, questionNumber) => {
    return `<FillInTheBlank questionNumber={${questionNumber}} />`;
  });
};

const MDXRender = ({ mdxContent }: { mdxContent: string }) => {
  const [Content, setContent] = useState<React.ComponentType | null>(null);
  const [answers, setAnswers] = useState<{ [key: number]: string }>({});

  const handleChange =
    (questionNumber: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
      setAnswers({
        ...answers,
        [questionNumber]: e.target.value,
      });
    };

  useEffect(() => {
    const compileMDX = async () => {
      const processedContent = processContent(mdxContent);
      const { default: CompiledContent } = await evaluate(processedContent, {
        ...runtime,
        useMDXComponents: () => ({
          FillInTheBlank: (props: { questionNumber: number }) => (
            <FillInTheBlank
              {...props}
              value={answers[props.questionNumber] || ""}
              onChange={handleChange(props.questionNumber)}
            />
          ),
          table: Table,
          tr: TableRow,
          td: TableCell,
          th: TableHeaderCell,
        }),
        remarkPlugins: [remarkGfm],
      });
      setContent(() => CompiledContent);
    };

    compileMDX();
  }, [mdxContent, answers]);

  return (
    <MDXProvider
      components={{
        FillInTheBlank,
        table: Table,
        tr: TableRow,
        td: TableCell,
        th: TableHeaderCell,
      }}
    >
      <div className="text-black">
        {Content ? <Content /> : <p>Loading...</p>}
      </div>
    </MDXProvider>
  );
};

export default MDXRender;

[wooorm]

Hi!

There’s a lot of code here, things like CSS, and many tools (providers?), that are not needed to debug your problem.
Please first remove anything that is not needed.
Please, help us help you, by making it easier to help you.

[hakimasyrofi]

Here’s a cleaned version of my code

Page.tsx

import MDXRender from "./TestRender.tsx";

// MDX content with placeholders for inputs
const mdxContent = `
# Hello MDX!

This is an example of MDX content __1__.

| Name | Type   | Description         |
| ---- | ------ | ------------------- |
| name | __2__  | Name of the resource|
| path | string | __3__              |
`;

const MDXDisplay = () => {
  return <MDXRender mdxContent={mdxContent} />;
};

export default MDXDisplay;

TestRender.tsx

import * as runtime from "react/jsx-runtime";
import React, { useState, useEffect } from "react";
import { evaluate } from "@mdx-js/mdx";

// Component for input fields based on question numbers
const FillInTheBlank = ({
  questionNumber,
  value,
  onChange,
}: {
  questionNumber: number;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) => (
  <input
    type="text"
    placeholder={`Input ${questionNumber}`}
    value={value}
    onChange={onChange}
  />
);

// Function to process the MDX content and replace placeholders with question numbers
const processContent = (mdxContent: string) => {
  return mdxContent.replace(/__(\d+)__/g, (_, questionNumber) => {
    return `<FillInTheBlank questionNumber={${questionNumber}} />`;
  });
};

const MDXRender = ({ mdxContent }: { mdxContent: string }) => {
  const [Content, setContent] = useState<React.ComponentType | null>(null);
  const [answers, setAnswers] = useState<{ [key: number]: string }>({});

  const handleChange =
    (questionNumber: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
      setAnswers({
        ...answers,
        [questionNumber]: e.target.value,
      });
    };

  useEffect(() => {
    const compileMDX = async () => {
      const processedContent = processContent(mdxContent);
      const { default: CompiledContent } = await evaluate(processedContent, {
        ...runtime,
        useMDXComponents: () => ({
          FillInTheBlank: (props: { questionNumber: number }) => (
            <FillInTheBlank
              {...props}
              value={answers[props.questionNumber] || ""}
              onChange={handleChange(props.questionNumber)}
            />
          ),
        }),
      });
      setContent(() => CompiledContent);
    };

    compileMDX();
  }, [mdxContent, answers]);

  return <div>{Content ? <Content /> : <p>Loading...</p>}</div>;
};

export default MDXRender;

[wooorm]

Thank you for making this smaller. Still, I want to ask you to go a bit further: are 2 files needed or can it be one file? Is the table in MDX needed or can it be a paragraph? Does it need to be 3 “inputs” or does it happen with 1? Is a placeholder needed? Please Please Please: try to remove every character that is not needed. Thank you

[wooorm]

Perhaps https://stackoverflow.com/help/minimal-reproducible-example might help

[remcohaszing]

Your issue is more of a React issue than an MDX issue. You’re defining the FillInTheBlank component inside your useEffect. That means as far as React is concerned, every time the dependency array useEffect is triggered, the FillInTheBlank component is a new component, unrelated to the previous one.

Your useEffect() should not depend on answers, while abiding to React’s rules of hooks. As long as answers is in the dependency array, or ESLint complains about it, the approach is wrong.

To get a better mental model, I recommend you start by removing useMdxComponents. Then pass the components prop to <Content /> instead while rendering. It looks like your goal is to provide data from this component to a nested child component without prop drilling. This can be achieved in React using context which you can provide in MDXRender, and consume in FillInTheBlank.

[hakimasyrofi]

Thank you for your response, it makes more sense now. I’ll try your suggestion.