Apparent problem in challenge React: Add Inline Styles in React

JavaScript
1

Hey there,

So I’m on the challenge React: Add Inline Styles in React. My solution looks like this:

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

The component renders, the styles all look correct, and some tests pass:
:white_check_mark: The component should render a div element.
:white_check_mark: The div element should have its styles defined by the styles object.

But the following tests fail:
:x: The styles variable should be an object with three properties.
:x: The styles variable should have a color property set to a value of purple .
:x: The styles variable should have a fontSize property set to a value of 40 .
:x: The styles variable should have a border property set to a value of 2px solid purple .

Now it seems pretty clear that styles is an object, which has 3 properties, and the color, fontSize and border properties are set as expected.

This fails on both Mac Safari and Chrome. Is it a bug?

Cheers
Grant

2

The directions have:

// Change code above this line
class Colorful extends React.Component {

So your style object should be above the class.

1 Like
3

Thanks a lot eoja - funny how you can’t see things like this when you’re busy being incredulous about how you actually fulfilled the requirements :crazy_face:

1 Like
4

Yeah, get used to humbling mistakes - it’s part of being a developer. With time you get better at finding the simple ones, but there will alway be something that pops up and makes you want to bang your head against the desk. At work, sometimes I have to grab another dev and ask them, “What am I no seeing here? …”

1 Like
5

Yep, been there and probably will be there again :sunglasses:

6

Outside of the instructions saying to create the object above the line, is there any issue with creating the object as part of the render since it does work?

7

Well, first and foremost it was what you were told to do. An important part of being a developer is being able to read and understand and follow tiny details.

But OK, why could it be better to store it in a constant outside of the class? I can think of two reasons.

  1. It makes the code cleaner and easier to read. This is a small component and the style props are few. But what if the class was already 150 lines long and each of 10 style objects are 20 lines long? Most people end up putting their styles in a different file.

  2. There can be an issue in creating object literals inside your JSX. Every time that render method is run, a new anonymous object literal is created with a new reference (and the old one gets garbage collected). I’m no expert on this, but my understanding is that this can mess with React’s attempt to understand which components and subcomponents to rerender. If the object reference changes, React will think something has changed in the component and will rerender. We want to prevent unnecessary rerenders. Creating the object at the file level means that it will be created once and will always have the same reference.

1 Like