Add Inline Styles in React

JavaScript
1

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
2

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
3

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

2 Likes
4

On the curriculum repo in GitHub.

1 Like
5

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

1 Like
6

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