Stuck in Site Point React Tutorial

[pixeldroid]

I’m studying the SitePoint “Getting Started With React Beginner’s Guide” ebook.
When I install the code on P.42, I get an unexpected token error. The problem appears to be the period in MessageView.propTypes. The compiler identifies this as the error in Chrome and Visual Studio Code also marks the period as a problem. Oddly, if I retype the object, autocompletion is fine with the period and will suggest “propTypes” as a possible property, but then show it as an error when I finish typing. All the code in the tutorial has executed correctly up to this point.
I’ve posted the code below.

Anyone know what’s wrong?
Thanks.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class MessageView extends Component {
    render() {
        const message = this.props.message;
        return (
            <div className="container">
                <div className="from">
                    <span className="label">From: </span>
                    <span className="value">{message.from}</span>
                </div>
                <div className="status">
                    <span className="label">Status: </span>
                    <span className="value">{message.status}</span>
                </div>
                <div className="message">
                    <span className="label">Message: </span>
                    <span className="value">{message.content}</span>
                    Getting Started with React: A Beginner’s Guide 42
</div>
            </div>
        )
    }
    // Mark message input parameter as required
    MessageView.propTypes = {
        message: PropTypes.object.isRequired
    }
}
export default MessageView;

[DaveMaxwell]

React is case sensitive, so I’d guess that MessageView.propTypes should be MessageView.PropTypes

[pixeldroid]

Thanks for the quick reply.

MessageView.PropTypes yields the same error (unexpected token). Visual Studio Code displays a red line under the period, so it identifies the period as the problem.

However, interestingly, if I start typing the object, only the capitalized version shows up in Intellisense (VSC autocompletion).

[rlgreen91]

Hi @pixelroid, what you need to do is move the MessageView.PropTypes declaration outside of the class. That’s what got it to work for me.

[pixeldroid]

Thanks!