CODEWITHSUNDEEP
javascriptreactjsdatagridreact-grid-layout
TeaBough
TeaBough

Reputation: 165

Extract grid item in a React component

Here is the piece of code from the react-grid-layout documentation

  var ReactGridLayout = require('react-grid-layout');
  //...

  render: function() {
  var layout = getOrGenerateLayout(); 
  return (
    <ReactGridLayout className="layout" layout={layout} 
      cols={12} rowHeight={30}>
      <div key={1}>1</div>
    </ReactGridLayout>
  )
}

With this I want to extract the div element in an React component. So I've added this piece of code :

var SimpleDiv = React.createClass({
    render() {
        return (<div>1</div>);
    }
});

And so the first part becomes :

  var ReactGridLayout = require('react-grid-layout');
  //...

  render: function() {
  var layout = getOrGenerateLayout(); 
  return (
    <ReactGridLayout className="layout" layout={layout} 
      cols={12} rowHeight={30}>
      <SimpleDiv key={1}>1</SimpleDiv>
    </ReactGridLayout>
  )
}

And the problem is that it's not working, the div element is present but no class name transformation occurs.

Am I missing something ?

Upvotes: 1

Views: 1643

Answers (2)

wata
wata

Reputation: 142

If you don't mind an extra 'div' element, you could use:

render: function() {
   var layout = getOrGenerateLayout(); 
   return (
      <ReactGridLayout className="layout" layout={layout} 
         cols={12} rowHeight={30}>
         <div key={1}><SimpleDiv>1</SimpleDiv></div>
     </ReactGridLayout>
  )
}

Upvotes: 0

Brandon Pugh
Brandon Pugh

Reputation: 1672

The problem is that you are wrapping the div element in your custom component so when the ReactGridLayout component tries to set properties on its children it'll be setting them on the SimpleDiv component. You might be able to make it work by passing along the props like:

var SimpleDiv = React.createClass({
    render() {
        return (<div {...this.props}>1</div>);
    }
});

or explicitly:

var SimpleDiv = React.createClass({
    render() {
        return (<div style={this.props.style} className={this.props.className}>1</div>);
    }
});

But I'm not too familiar with ReactGridLayout so if that doesn't work you may have to ping them and ask if it's possible.

Upvotes: 2

Related Questions