Unexpected Identifier while coding in React

Question

I am making a 'Markdown Previewer' using ReactJS. However, I am stuck at a code that seems to me just fine. The error is simply of an 'unexpected identifier ='. Can't seem to wrap my head around as to why it displays this error.

Following is my code snippet ..

class Markdown extends React.Component {
    static defaultProps = {
        text : 'This comes from defaultProps !'
    };

    static propTypes = {
        text : React.PropTypes.string.isRequired,
        onChange : React.PropTypes.func.isRequired;
    };

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.props.onChange(e.target.value);
    }

    render() {
        const style = {
            width : '100%',
            fontSize : '18px',
            border : '1px solid grey',
            padding : '20px'
        };

        return (
            <textarea style={style} rows='20' placeholder='// Enter text here ..' onChange='this.handleChange'>
                {this.props.text}
            </textarea>
        );
    }
}

Here is project code link .. https://codepen.io/iamrkcheers/pen/oeEyvo

The error occurs at line 67.

Any help is appreciated. Thank you.

marpme · Accepted Answer · 2017-08-20 09:57:55Z

My solution would be this, referring to the react documentation regarding type checking and creating defaultProps as a static function, to get them at everytime.

class Markdown extends React.Component {

    static defaultProps() { 
        return {
            text : 'This comes from defaultProps !'
        };
    }


    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        this.props.onChange(e.target.value);
    }

    render() {
        const style = {
            width : '100%',
            fontSize : '18px',
            border : '1px solid grey',
            padding : '20px'
        };

        return (
            <textarea style={style} rows='20' placeholder='// Enter text here ..' onChange='this.handleChange'>
                {this.props.text}
            </textarea>
        );
    }
}

Markdown.propTypes = {
        text : React.PropTypes.string.isRequired,
        onChange : React.PropTypes.func.isRequired
};

Patrick Hund · Accepted Answer · 2017-08-20 09:53:50Z

1

In JSX, you need to use double quotes for passing props to elements.

You're using single quotes, which won't work and causes the error.

Another mistake is enclosing your change handler in single quotes, in this case, you have to use curly braces, because it is actually a JavaScript argument you want React to execute, not a string.

return (
    <textarea style={style} rows="20" placeholder="// Enter text here .." onChange={this.handleChange}>
        {this.props.text}
    </textarea>
);

answered Aug 20, 2017 at 9:53

Patrick Hund

20.4k12 gold badges71 silver badges97 bronze badges

1 Comment

iamrkcheers Over a year ago

Yeah .. figured the 'quotes' instead of 'braces' part. Thanks.

Rama Schneider · Accepted Answer · 2017-08-20 09:50:29Z

0

Don't have any experience with React, but it does seem to me you need some sort of string quoting in your 'return' function. That for javascript would certainly throw the error you're seeing.

answered Aug 20, 2017 at 9:50

Rama Schneider

644 bronze badges

Collectives™ on Stack Overflow

Unexpected Identifier while coding in React

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related