How do I add a valueless custom attribute without data-* to a TSX template?

Question

I am working on a React component using Typescript. Currently I have the following....

const NameFormatter = React.createClass({
    render() {
        return (
            <div>
                <div className="dataset-name">
                    {this.props.value}
                </div>
            </div>
        );
    }
});

This works and outputs

<div>
  <div className="dataset-name"> My Value </div>
</div>

What I need though is...

<div fxLayout="row" fxFlex>
  <div className="dataset-name"> My Value </div>
</div>

So I tried...

const NameFormatter = React.createClass({
    render() {
        return (
            <div fxFlex fxLayout="row">
                <div className="dataset-name">
                    {this.props.value}
                </div>
            </div>
        );
    }
});

But this will not compile and says...

Property 'fxFlex' does not exist on type 'HTMLProps'. Property 'fxLayout' does not exist on type 'HTMLProps'.

How do I go about adding these attributes?

Update

This works...

<div {...{"data-fxFlex":""}}>

The problem is since this is being consumed by angular after rendering and angular requires the name to be fxFlex it doesn't seem to help.

Also this kinda seems to work but doesn't set the value properly...

let d = ` <div className="dataset-name" fxFlex=""> {this.props.value} </div> `; return ( <div className="dataset-name-wrapper" dangerouslySetInnerHTML={{__html: d}} > </div> );

But this outputs

<div class="dataset-name-wrapper">
  <div classname="dataset-name" fxflex>
    {this.props.value}
  </div>
</div>

I'm not sure that you can: [Allow custom (nonstandard) attributes](https://github.com/facebook/react/issues/140) — Nitzan Tomer, Mar 06 '17 at 14:33
You can avoid compile errors using attribute spread, `
` but this won't prevent React proptype errors at runtime. — Aaron Beall, Mar 06 '17 at 14:34
You guys look to be right, this actually look like a duplicate, after I posted I found http://stackoverflow.com/questions/31273093/how-to-add-custom-html-attributes-in-jsx. @Aaron I tried this `
` but no dice. I also tried `
` again no dice. — Jackie, Mar 06 '17 at 14:38
I guess it isn't really a duplicate because that doesn't talk about valueless. Also that question mentions that it won't work with Es6 and it won't work with anything that doesn't have `data-` — Jackie, Mar 06 '17 at 14:42
The syntax would be `
`, but again, that doesn't really help because React will not pass it through to the DOM if it doesn't recognize it. Can you use `data-*` prefix? Can you use a web component? — Aaron Beall, Mar 06 '17 at 14:46
Yeah I figured that out right after I posted `
` renders but doesn't help me. Not sure about the web-component since it is an angular directive and I think needs to be set before it is injected (this is part of Angular2 material, also I haven't used webcomponents much yet). I updated the question to reflect this. — Jackie, Mar 06 '17 at 14:49
@Aaronknow anything about trying to do it like this... dangerouslySetInnerHTML={{__html: '
'}} — Jackie, Mar 06 '17 at 14:57

score 0 · Answer 1 · edited May 23 '17 at 11:46

This seems to be an issue in React and there is a ticket opened for it. In the mean time since I am using TS I can use the ES6 expression interpolation like this...

const NameFormatter = React.createClass({
    render() {
        let d = `
                <div className="dataset-wrapper" fxFlex="">
                  <div>
                     ${this.props.value}
                  </div>
                </div>
        `;
        return (
            <div className="react-wrapper" dangerouslySetInnerHTML={{__html: d}} >

            </div>
        );
    }
});

However, this is extremely hacky and is prone to XSS issues. So I am not going to accept this answer and instead will wait till the issue is fixed.

How do I add a valueless custom attribute without data-* to a TSX template?

1 Answers1