2

I would want to use the this.props data in the div tag. i have the color in the data which i would want to set dynamically . Would it be possible to use this.props in the div tag?

var cont =  {
      height: "90px",
  width: "20%",
  background: "LightBlue",
  display: "inline-block",
  padding: "5px",
      margin: "5px"
};

var Comment = React.createClass({    
    render: function () {
      return (
          <div style={cont}>
              <span>
                  {this.props.author}
                  {this.props.col}
              </span> 
          </div>   
      );
    }
});
Mayank Shukla
  • 80,295
  • 14
  • 134
  • 129
Maddy
  • 105
  • 10

2 Answers2

1

Look:

var Comment = React.createClass({
    render: function() {
        return (
            <div style={{backgroundColor: this.props.col}}>
                <span>
                    {this.props.author}
                    {this.props.col}
                </span>
            </div>
        );
    }
});

this.props.color here is a prop of Comment component and not of the div. You can use this prop wherever you want in this component.

As @MayankShukla said, for updating field in style object you can use Object.assign.

Andrew
  • 6,470
  • 2
  • 21
  • 33
  • var cont = { height: "90px", width: "20%", background: "LightBlue", display: "inline-block", padding: "5px", margin: "5px" }; var Comment = React.createClass({ render: function () { return (
    {this.props.author} {this.props.col}
    ); } }); i have already a style added to it , how do i add background color with this.prop along with it?     – Maddy Sep 01 '17 at 11:33
0

Try this:

<div style={{backgroundColor: this.props.col}}>

Offical React style documentation

damd
  • 4,569
  • 4
  • 36
  • 66
  • i have a style added to it
    , how do i add style={{backgroundColor: this.props.col}} again to same div?
     – Maddy Sep 01 '17 at 11:37