Line breaks / paragraphs? about markdown-to-jsx

[quantizor]

@timwis Just FYI, I added a note about this to the README: https://github.com/yaycmyk/markdown-to-jsx/blob/master/README.md

Thanks for bringing it up - I hadn't run into that usage style yet.

[quantizor]

Hmm that's bizarre. Yeah it definitely supports paragraphs.

Could you post more of a complete example of how you're using the library and what OS, etc?

[timwis]

Sure, here's how I'm attempting to use it:

import React from 'react'
import Markdown from 'markdown-to-jsx'

export default class IntroText extends React.Component {
  render () {
    return (
      <Markdown>
        # incidents_part1_part2

        This dataset is published to [carto](https://carto.com), which allows you to query the data using SQL (specifically the PostgreSQL flavor with the PostGIS extension). Rather than executing the queries in a database program, you execute them through HTTP (ie. the web browser) via Carto's [SQL API](https://carto.com/docs/carto-engine/sql-api), passing your query as the `q` parameter. For example:

        ```
        https://phl.carto.com/api/v2/sql?q=SELECT * FROM incidents_part1_part2
        ```

        You can do just about everyting you'd expect from a PostgreSQL+PostGIS database - even joins between tables.
      </Markdown>
    )
  }
}

I'm using macOS Sierra.

This would be a separate issue, but I've also noticed that if I try to reference {this.props.xxxxx} within the markdown, I get a few console errors:

Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Component`, expected `string`.

Uncaught Error: markdown-to-jsx: the first argument must be a string

Thanks for your time.

[solugebefola]

I am having a similar issue. When I am using a single line string in brackets {"# foo\n\n## bar"} it works fine, but using multiline text results in everything after the first line becoming a child of the first line.

export function Content() {
    return (
        <Markdown>
            # This is the first headline

            ## This is the second headline

            here is something else
        </Markdown>);
}

The displayed hierarchy is

<h1 data-reactid=".0.2.0.0">This is the first headline ## This is the second headline here is something else</h1>

I am also using macOS Sierra. I wonder if it is related to the upgrade of browserify?

UPDATE I was checking how react interprets raw text in the context of children. Apparently it does not acknowledge line breaks. When I made a random function

function Child(props) {
    console.log(props.children);
    return (
        <div>
        </div>
    );
}

and placed it in the context of a render:

...
return (
            <div>
                <Child>
                    # This is a text

                    ## this is more text

                    ### Last bit of text
                </Child>
            </div>
        );

the console output was # This is a text ## this is more text ### Last bit of text

[quantizor]

Hmm, what if you do:

<Child>
{`    # This is a text

    ## this is more text

    ### Last bit of text
`}
</Child>

Hacky, I know but maybe it'll preserve the newlines.

[quantizor]

FWIW, I use this component every day in enigma-io/boundless on markdown brought in by the webpack raw-loader and it definitely preserves the newlines there.

[quantizor]

Going to close this, since it doesn't seem like an issue with the component.

[timwis]

Thanks. FYI I ended up doing something similar to what the readme suggests, but without using a loader:
https://github.com/CityOfPhiladelphia/carto-api-explorer/blob/master/src/components/encoded-markdown.js