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
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.
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.
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.
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.
