invalid jsx generated when using tables with left/right/center alignments

[darrencruse]

Hi we have run into an error when using tables in markdown with alignments controlled using the colon syntax e.g.

|     Dropdown Selections    |                          Expanded versions                          |
|:--------------------------:|:-------------------------------------------------------------------:|
|   Automated Variable Rate  |     Automated Variable Rate Irrigation Management Control System    |

In this case the markup generated for the table within the output JSX is like so:

<table>
    <thead>
        <tr>
            <th style="text-align:center">Dropdown Selections</th>
            <th style="text-align:center">Expanded versions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align:center">Automated Variable Rate</td>
            <td style="text-align:center">Automated Variable Rate Irrigation Management Control System</td>
        </tr>
    </tbody>
</table>

And though this would be fine if it were truly html JSX has the requirement that "style" take a bracketed javascript object for the style settings not a simple string. Because of that we're getting this error:

Uncaught Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by StatelessComponent.
at invariant (bundle.js:14373)
at assertValidProps (bundle.js:158995)
at ReactDOMComponent.mountComponent (bundle.js:159290)
at Object.mountComponent (bundle.js:27293)
at ReactDOMComponent.mountChildren (bundle.js:162536)
at ReactDOMComponent._createInitialChildren (bundle.js:159541)
at ReactDOMComponent.mountComponent (bundle.js:159360)
at Object.mountComponent (bundle.js:27293)
at ReactDOMComponent.mountChildren (bundle.js:162536)
at ReactDOMComponent._createInitialChildren (bundle.js:159541)

Do you think I'm seeing this right? Am I right it seems like a bug with react-markdown-loader?

[javiercf]

Hi Darren, thanks for reporting this, yeah it actually looks like we ignored parsing style attributes and converting them to valid jsx, I'll update the module sometime this week as soon as I get some time off from work, if by any chance you guys want to give it a go, it's the function parseCodeBlock located in the parser.js file, thanks for using the module, glad it's helping you guys out!

[darrencruse]

thanks fwiw once I understood the problem I decided - heck with the alignment stuff!!

(so actually atm I'm fine just because the table markup I'm generating now without the alignment stuff doesn't have the style="..." part)