How to fix on checkboxes default value checked warning ?

[dimaslanjaka]

I have markdown

## Features

- [x] unique visitor
- [x] override useragent
- [ ] Disable WebRTC
- [x] local exchanger
- [x] override referer
- [ ] override custom header
- [ ] override proxy
- [ ] push url to global exchanger
- [x] auto scroll top - bottom ↻

then i render the raw markdown with this

import { markdown as changelogMd } from '@root/changelog.md';
import { markdown as readmeMd } from '@root/readme.md';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';
import './homepage.scss';

const Homepage = () => {
  return (
    <main id="homepage" className="markdown-body relative overflow-x-auto">
      <div className="mx-auto prose lg:prose-lg dark:prose-invert text-gray-500 dark:text-gray-400">
        <ReactMarkdown children={readmeMd} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
        <div style={{ height: '2em' }}></div>
        <h2 className="text-center">CHANGELOG</h2>
        <ReactMarkdown children={changelogMd} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
      </div>
    </main>
  );
};

export default Homepage;

got error

Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
input
li
ul
Markdown@http://adsense.webmanajemen.com:4000/node_modules/.vite/deps/react-markdown.js?v=aab05a7d:5020:27
div
main
Homepage
RenderedRoute@http://adsense.webmanajemen.com:4000/node_modules/.vite/deps/chunk-YCEBR7Y5.js?v=aab05a7d:3556:7
Routes@http://adsense.webmanajemen.com:4000/node_modules/.vite/deps/chunk-YCEBR7Y5.js?v=aab05a7d:4060:7
div
div
div
Router@http://adsense.webmanajemen.com:4000/node_modules/.vite/deps/chunk-YCEBR7Y5.js?v=aab05a7d:4008:7
BrowserRouter@http://adsense.webmanajemen.com:4000/node_modules/.vite/deps/react-router-dom.js?v=aab05a7d:554:7
SidebarProvider@http://adsense.webmanajemen.com:4000/src/components/FlowbiteLayout/context/SidebarContext.tsx:21:32
Flowbite@http://adsense.webmanajemen.com:4000/node_modules/.vite/deps/flowbite-react.js?v=aab05a7d:11710:16
FlowbiteContext@http://adsense.webmanajemen.com:4000/src/

this error made my navigation button (aside or top) not working.

here full markdown files:

• https://github.com/dimaslanjaka/android-traffic-exchange/blob/vite/readme.md
• https://github.com/dimaslanjaka/android-traffic-exchange/blob/vite/changelog.md

[wooorm]

Well it’s a warning. And what it says is true. It’s a readonly input. You know, warnings aren’t bad? What do you want?

this error made my navigation button (aside or top) not working.

That sounds more like something else?

[dimaslanjaka]

in this page with chekboxes list markdown, the navigation bar not working. (i thought caused by warning on console).

but in another page with markdown (without checkboxes list). the navigation working

[dimaslanjaka]

@ChristianMurphy i just want display like this without any errors. same as github do, but in my website.

[dimaslanjaka]

is that error on console can makes my template broken ? iam using flowbite-react + vite + vite markdown plugin (raw mode).

my vite render config https://github.com/dimaslanjaka/android-traffic-exchange/blob/3cb4a39dc9d89dc09c7a72b960787ff355bbdf24/vite.config.ts#L6-L14

[ChristianMurphy]

is that error on console can makes my template broken ? iam using flowbite-react + vite + vite markdown plugin (raw mode).

No. Console warnings would not cause the app to halt or break.

i just want display like this without any errors. same as github do, but in my website.

It displays exactly how GitHub does already.
The warning is coming from your development tooling, you don't see the warning in GitHub because it is not using the same tools and is running in production mode not development mode.

[ChristianMurphy]

https://github.com/dimaslanjaka/android-traffic-exchange/blob/3cb4a39dc9d89dc09c7a72b960787ff355bbdf24/vite.config.ts#L6-L14

You aren't using remark here, you are using markdown-it (https://github.com/hmsk/vite-plugin-markdown/blob/1c1dfb46c055a5325f17b00913d4e48e88ed731b/package.json#L48).
That is a completed different parser and community,
If you have questions on how their parser works you can ask the markdown-it community https://github.com/markdown-it/markdown-it

[dimaslanjaka]

It displays exactly how GitHub does already. The warning is coming from your development tooling, you don't see the warning in GitHub because it is not using the same tools and is running in production mode not development mode.

ah i see. i should inspect more deeper on this page.

[dimaslanjaka]

ohhh the vite plugin markdown using markdown-it. thanks

[ChristianMurphy]

Welcome @dimaslanjaka! 👋
Sorry you ran into some confusion.

The HTML is indeed static, and is noted as such with the disabled attribute.
https://github.github.com/gfm/#task-list-items-extension-

You are welcome to make it read only or turn it interactive.
The warning in your console, is just that a warning, you can resolve it if wanted or leave it be.

[dimaslanjaka]

here my problem sir https://github.com/orgs/remarkjs/discussions/1304#discussioncomment-9025402

iam not replacing any theme code, just render markdown with checkboxes list.