How to add a string of data attributes to react?

Question

How can I insert a string of data attributes to a react render function in a simple way?

  render() {
    let data_attr_str=' data-test="1" data-test-2="2"';

    return (
      <div className="grid" {data_attr_str}>
        WHY YOU NOT WORKING? 
      </div>
    );
  }

Hey Tiago, I would like the final html output to be: <div class="grid" data-test="1" data-test-2="2"> WHY YOU NOT WORKING?</div> — jon
– jon, Commented Mar 7, 2018 at 19:35

fhelwanger · Accepted Answer · 2018-03-07 19:36:52Z

11

JSX is not a template engine, so you can't just concatenate that string. I think you should check https://reactjs.org/docs/jsx-in-depth.html for more details.

But you can use spread attributes: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes.

render() {
  let dataAttrs = {
    'data-test': '1',
    'data-test-2': '2'
  };

  return (
    <div className="grid" {...dataAttrs}>
      NOW IT WORKS
    </div>
  );
}

answered Mar 7, 2018 at 19:36

fhelwanger

4754 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jon Over a year ago

Thanks fhelwanger , also +1 for the 'NOW IT WORKS!'

Collectives™ on Stack Overflow

How to add a string of data attributes to react?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related