What is my syntax error in my Provider component?

Question

Please help! https://gyazo.com/c5982a3511467c8ca895ef8ddf708ef1 Syntax error: Unexpected token, expected ; (20:17) My component has a syntax error, no idea why I get ./src/Provider/index.js Syntax error: Unexpected token, expected ; (20:17)

18 | } 19 |

20 | render() { | ^ 21 |
22 | return ( 23 |

class index extends React.Component {

constructor() {
    super();
    this.state = {
        books: [],
        currentlyReading:[],
        wantToRead:[],
        read:[],
        addBooks: books => {

    }
}

   render()  {

      return (
         <MyContext.Provider 

        value={{...this.state}}>
      {this.props.children}


       </MyContext.Provider>)
}
}

export default index;

Answer 1

 constructor() { // <- 1
    super();
    this.state = { // <- 2
      books: [],
      currentlyReading:[],
      wantToRead:[],
      read:[],
      addBooks: books => { // <- 3

  } // < - 3
 } // < - 2
 // <- 1 ???

You are missing a closing } to close the constructor. Therefore render() { /*..*/ } is a syntax error as it is inside the methods body and not in the classes body.

Answer 2

I think you need to put parentheses around the arrow function's return value

  addBooks: books => ({

  })

And you are also missing } for the constructor.

Here's what the code should look like

class index extends React.Component {
  constructor() {
    super();
    this.state = {
      books: [],
      currentlyReading:[],
      wantToRead:[],
      read:[],
      // you were missing parenthesis here
      addBooks: books => ({

      })
    }
  // you were also missing this } here
  }

  render()  {

    return (
        <MyContext.Provider 

      value={{...this.state}}>
        {this.props.children}


      </MyContext.Provider>)
  }
}

Note: The reason you have to wrap arrow function's return value in a parenthesis is because it's an object literal. Have a look at the documentation