error when trying to fetch data from server Parsing error: Unexpected token

Question

I am working with pern stack and when I try using useEffect or useState, I am getting this error. so, I used postgres to create database and used express to connect using pool

created a endpoint and tried fetching that in my code

import React, {useEffect , useState} from 'react';
import Table  from './Table';
import Nav from './Navi';
import TemplateList from './TemplateList';
import {Tab,Tabs} from 'react-bootstrap';
class Dashboard extends React.Component{
  const [tdata,setTdata] = React.useState([]);

  info = async () => {
    try {
      const response = await fetch("http://localhost:8080/dashboard");
      const dataServer = await response.json();
      React.setTdata(dataServer);
    } catch (err) {
      console.error(err.message);
    }
  }
  console.log(tdata);

  React.useEffect(() => {
    info();
  }, []);

error

Failed to compile
./src/components/Dashboard.js
  Line 7:9:  Parsing error: Unexpected token

   5 | import {Tab,Tabs} from 'react-bootstrap';
   6 | class Dashboard extends React.Component{
>  7 |   const [tdata,setTdata] = React.useState([]);
     |         ^
   8 | 
   9 |   info = async () => {
  10 |     try {

Bassem · Accepted Answer · 2020-05-18 20:17:58Z

1

You can't use React hooks in a Class-Based component, change your class into a pure functional component like this:

import React, { useEffect, useState } from "react";
import Table from "./Table";
import Nav from "./Navi";
import TemplateList from "./TemplateList";
import { Tab, Tabs } from "react-bootstrap";

const Dashboard = (props) => {
  const [tdata, setTdata] = useState([]);

  const info = async () => {
    try {
      const response = await fetch("http://localhost:8080/dashboard");
      const dataServer = await response.json();
      setTdata(dataServer);
    } catch (err) {
      console.error(err.message);
    }
  };
  console.log(tdata);

  useEffect(() => {
    info();
  }, []);

  return {
    <div>
       /* your JSX here */
    </div>
  };
};

More about hooks here: https://reactjs.org/docs/hooks-intro.html

edited May 18, 2020 at 20:17

answered May 15, 2020 at 21:50

Bassem

4,1804 gold badges26 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

error when trying to fetch data from server Parsing error: Unexpected token

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related