String is not an array, but the library thinks it is.

[Andret2344]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected package

[email protected]

Steps to reproduce

In a typescript project, do this:

const description: string = '# 123';
<Markdown>{description}</Markdown>
// or
<Markdown children={description} />

Actual behavior

Assertion
Unexpected value 123 for children prop, expected string

Expected behavior

A string should be treated as a string.

Initial investination

The problem appears in this code:

By default, the children prop is an array, and that's a designed by React behavior. Instead of throwing an error, it can be parsed, i.e., using the .join() method in case of an array. It's impossible to pass a string as the children prop in such a way that React won't convert it to an array.

Runtime

Chrome 133.0.6943.54 (Official Build) (64-bit), [email protected]

Package manager

[email protected], [email protected]

Operating system

Microsoft Windows 11 24H2 (Build 26100.3037)

Build and bundle tools

webpack

[wooorm]

Hi!

The simplest answer to your very weird problem of strings suddenly being numbers or arrays is: you are making a mistake. Try and make a small reproduction (# 123 is not 123 so these screenshots are different from your actual code). Try and console.log description. You are making a mistake.

By default, the children prop is an array, and that's a designed by React behavior

No, it is not that, by default. Try and reproduce with babel. If children is an array, it is so because a) you are passing an array, or b) some tool is turning things into arrays.

[Andret2344]

Hi, yeah, I crafted the code, my bad. Here's a real example:

const description: string = '# abc';
console.log(description, typeof description);
<Markdown>{description}</Markdown>
// also doesn't work
<Markdown children={description} />

Tried also:

<Markdown># abc</Markdown>
// and
<Markdown children='# abc' />

In every case, the result is as follows:

If I'm making a mistake, I'd love to know what it is, but for now there's no way to render anything except for an empty body.

[remcohaszing]

Yes, you are making a mistake, but it’s not an obvious one. Something in your toolchain is wrapping that string into single item array. Likely suspects are a bad JSX compiler or a bad custom JSX runtime implementation. Have a look at how <Markdown># abc</Markdown> is compiled in your bundle.