Parsing error: Unexpected reserved word 'static'

user_11642297 0
Viewed 3513

I'm trying to add context to this class component however I am thrown this error.

Do I have a syntax issue or is this a bug?

I'm using it in another component and it is working just fine.

import React, { Component } from 'react'
import { Avatar, Button, CssBaseline, FormControl, FormControlLabel, Checkbox, Input, InputLabel, Paper, Typography, MenuItem, Select } from '@material-ui/core'
import { LockOutlined } from '@material-ui/icons'
import { withStyles } from '@material-ui/core/styles'
import { LanguageContext } from './contexts/LanguageContext'
import styles from './styles/FormStyles'

class Form extends Component {

  render() {
    static contextType = LanguageContext
    const { classes } = this.props



return (
  <main className={classes.main} >
    <Paper className={classes.paper}>
      <Avatar className={classes.avatar}>
        <LockOutlined />
      </Avatar>
      <Typography variant='h5'>Sign In</Typography>
      <Select value='english'>
        <MenuItem value='english'>English</MenuItem>
        <MenuItem value='french'>French</MenuItem>
        <MenuItem value='spanish'>Spanish</MenuItem>
      </Select>
      <form className={classes.form}>
        <FormControl margin='normal' required fullWidth>
          <InputLabel htmlFor='email'>Email</InputLabel>
          <Input id='email' name='email' autoFocus />
        </FormControl>
        <FormControl margin='normal' required fullWidth>
          <InputLabel htmlFor='password'>Password</InputLabel>
          <Input id='password' name='password' autoFocus />
        </FormControl>
        <FormControlLabel control={<Checkbox color='primary' />} label='Remember Me'></FormControlLabel>
        <Button variant='contained' type='submit' fullWidth color='primary' className={classes.submit}>Sign In</Button>
      </form>
    </Paper>
  </main>
)
  }
}

export default withStyles(styles)(Form)
reactjs
2 Answers

The problem is here,

render() {
    static contextType = LanguageContext // <- here
    const { classes } = this.props

You cant use static in there, instead you probably wanted to use it in class, Just shift it in the class and it will work,

class ... {
  static contextType = LanguageContext
...
user_107941400

Move static statement outside the render method, static members can not be in class instance.

e.g

class Form extends Component {

  static contextType = LanguageContext

  render() {
    const { classes } = this.props
    return (.....
user_47126260
Related