Whitespace matters! Write a React Component from Scratch

JavaScript
1

Just completed the Write a React Component from Scratch challenge, and I was pulling my hair out. The challenge accepts this:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return (<div>
                    <h1>My First React Component!</h1>
                </div>);
    }
};

but not this:

// change code below this line
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return 
        (<div>
            <h1>My First React Component!</h1>
        </div>);
    }
};

Is this something I should be wary of in general, or is this freeCodeCamp being picky?

3

Actually, in this case it matters. Since semicolons are (usually) optional in JS, you have to be careful where you break lines. When return appears on a line by itself, the function exits and just returns undefined.

4 Likes
4

As @ArielLeslie said, the reason why the test doesn’t accept the syntax is because of the return() keyword.

Correct

return (
//content here
);

return (//content here
);

return (/*content here*/ );

Will make an error:

return
(
//content here 

)

As long as the opening parenthesis is in the line of return it won’t return an error. :slightly_smiling_face:

Happy coding!

5

What am I missing below?

// change code below this line
// change code below this line
class MyComponent extends React.Component{
  Constructor(props){
  super(props);

  }

  render(){
    return (
      <div>
      <h1>My First React Component!</h1>
      </div>
    );
  }

  

}

ReactDOM.render(<MyComponent />, document.getElementById ('challenge-node'));