Add Inline Styles in React

Tell us what’s happening:
It has a bug, as i have been thought from the previous exercise, i can use ‘40px’/‘40em’
but in this case if i use fontSize: ‘40px’ instead of just 40 it will not pass.
any idea why ? (the default for just numbers 40 is pixels anyway)

Your code so far



 const styles ={
   color: 'purple',
   fontSize: '40px',
   border: '2px solid purple'
 }
// change code above this line
class Colorful extends React.Component {
  render() {
    // change code below this line
    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/67.0.3396.99 Safari/537.36.

Link to the challenge:

1 Like

The thing is that the test code has been written to look for the value 40 exactly,

you can see the test here:

        {
          "text":
            "The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.",
          "testString":
            "assert(styles.fontSize === 40, 'The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.');"
        },

So the challenge is currently expecting to find a fontSize style of 40, and not any variation of it like 40px.

We may argue that the test is too strict and we can include any possible variation, but that’s another story.

3 Likes

hey, thanks.
Where did you go in order to see the test case you attached?

2 Likes

On the curriculum repo in GitHub.

1 Like

Thanks :slight_smile: , it can really help for future problems

1 Like

to be honest the challenge description was quite specific with it :wink:
Checking the source code is useful before claiming is a bug instead of a mistake.

Happy coding :sparkle:

3 Likes