Add Inline Styles in React bug if styles variable not declared outside of component

Tell us what’s happening:

Just to let you know the test will fail if the styles variable is declared within the component, even though it renders correctly. There is a hint in the markup but it isn’t required in the instructions.

  **Your code so far**

// Change code above this line
class Colorful extends React.Component {
render() {
  // Change code below this line
  const styles={
    color:'purple',
    fontSize:40,
    border: '2px solid purple'
  }
  console.log(typeof styles);
  console.log(styles)
  return (
    <div style={styles}>Style Me!</div>
  );
  // Change code above this line
}
};
  **Your browser information:**

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

Challenge: Add Inline Styles in React

Link to the challenge:

Yes, that is true…

Of course, building it outside the class is the norm (but the learner might not know that). And of course some of the tests could not be written if this were a local variable to the render method (but the learner may not realize that). I agree that it could be a little confusing to someone that has never seen this pattern before. You could say that it is implied by the first “// Change code above this line”, but that might be a bit thin.

Perhaps a clarifying sentence like, “Declare your styles object as a global variable.” or something like that. Or maybe a simplified example.

1 Like

This was reported before, but the reason given for closing the issue seems odd. I might open it again and see if we shouldn’t at least make it more clear where the object should be declared.

The test fails because it is expecting styles to be available in the outer scope and not be declared as a class field.

Edit: @jacques.nikola I reopened the issue.

2 Likes

Thanks, for doing that, @lasjorg . I must not have been paying enough attention, and thought the lesson expected the styles to be defined within the call to the component. :sweat_smile:

1 Like

Thanks for the quick replies. I realize it makes more sense to declare the object outside the component and I agree with that 100%. To be honest, I don’t think it’s that big of an issue, but I thought I’d create a post in case someone else got stuck and couldn’t figure out what was wrong with their code.

I realize it makes more sense to declare the object outside the component

To be honest, sometimes I do declare the object inside the component, if it needs extensive props or state. Or sometimes I use a function to return the object in that case, so I can extract the logic to somewhere else to keep the code clean.

But I do agree that the “declare it outside the component” is a good default pattern.

To be honest, I don’t think it’s that big of an issue, but I thought I’d create a post in case someone else got stuck and couldn’t figure out what was wrong with their code.

Thank you. This is how we keep improving.

1 Like