Add Inline Styles in React1

Tell us what’s happening:

i am not able to understand what do they mean by assining object in styles through div

Your code so far



 const styles ={color:"purple",fontSize:40,border:"2px solid purple"};
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    return (
      <div style={{color: "green", fontSize: 24}}>Style Me!</div>
    );
    // change code above this line
    <div style={this.styles} />
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36.

Link to the challenge:

1 Like

It wants you to use the style const variable up top.

Assign the variable an object and give the object all the properties and values as asked for in the challenge. Then set the style on the div to use that variable.

const styles = {
...your properties and values
}


<div style={use the name of the const variable here}>Style Me!</div>

Edit2:

  1. You can’t use “this” the variable is not on an object it is just a top level variable, you just use the name.

  2. You should change the div you already have, don’t add a new div

BTW the new div would also not be returned as it is not inside the return, anyway delete that and only change the one inside the return.

1 Like