Data attributes not working

[thomasKn]

Hi there,

I have no idea why I can't run html data attributes (data-grid, data-width, data-height).

Here is the list component:

import React from 'react';
import { Row, Grid, Alert } from 'react-bootstrap';
import { Drawing } from './drawing.js';

export const DrawingsList = ({ drawings }) => (
  drawings.length > 0 ? <Grid className="m-y-md" data-grid="images">
    <Row>
      {drawings.map((sketch) => (
        <Drawing key={ sketch._id } drawing={ sketch } />
      ))}
    </Row>
  </Grid> :
  <Alert bsStyle="warning">No drawings yet.</Alert>
);

DrawingsList.propTypes = {
  drawings: React.PropTypes.array,
};

Here is the drawing component:

import React from 'react';
import { Row, Image } from 'react-bootstrap';
import '../../ui/styles/js/custom/image-grid.js';

export const Drawing = ({ drawing }) => (
  <Row>
    <a href="#" className="hvr-glow">
      <Image data-width="640" data-height="640" data-toggle="modal" data-target="#modalPicture" src={ drawing.thumbnailData.url }/>
    </a>
  </Row>
);

[themeteorchef]

This shouldn't have anything to do with Base. My bet is that it's a limitation of the react-bootstrap dependency (data-* is looked at as an unknown prop).