ReactJS : Parsing error: Unexpected token

Question

class PostIndex extends Component {

    //define state
    const [posts, setPosts] = useState([]);

    //useEffect hook
    useEffect(() => {

        //panggil method "fetchData"
        fectData();

    }, []);

    //function "fetchData"
    const fectData = async () => {
        //fetching
        const response = await axios.get('http://localhost:3000/api/posts');
        //get response data
        const data = await response.data.data;

        //assign response data to state "posts"
        setPosts(data);
    
    }
}


export default PostIndex;

please help me, i new learning at react js. i was about make class name PostIndex, so i change from function PostIndex() to class PostIndex extends Component. and get error from this line const [posts, setPosts] = useState([]); could you help me? please. thanks

You can't use hooks in the class components, check docs rather use functional component: const PostIndex = () => { const [posts, setPosts] = useState([]); // rest of your code.... } export default PostIndex; — Nakul Nagariya
– Nakul Nagariya, Commented Jun 7, 2022 at 7:33

Evgenii · Accepted Answer · 2022-06-07 07:33:36Z

1

You cant use react class components with react hooks.

So the right solution will be something like this:

const PostIndex = () => {

  //define state
  const [posts, setPosts] = useState([]);

  //useEffect hook
  useEffect(() => {

      //panggil method "fetchData"
      fectData();

  }, []);

  //function "fetchData"
  const fectData = async () => {
      //fetching
      const response = await axios.get('http://localhost:3000/api/posts');
      //get response data
      const data = await response.data.data;

      //assign response data to state "posts"
      setPosts(data);
  }

  return your markup
}

answered Jun 7, 2022 at 7:33

Evgenii

1432 silver badges8 bronze badges

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

2 Comments

funderjimed ieinc Over a year ago

so i can't use class if there is useState?

Evgenii Over a year ago

Yes, react hooks only works with functional components

Nakul Nagariya · Accepted Answer · 2022-06-07 07:38:18Z

1

You can't use hooks in the class components, check docs rather use functional component:

const PostIndex = () => {
  const [posts, setPosts] = useState([]);
  // rest of your code....
  }

  export default PostIndex;

answered Jun 7, 2022 at 7:38

Nakul Nagariya

1071 gold badge1 silver badge8 bronze badges

1 Comment

funderjimed ieinc Over a year ago

thank for share new things for me, its so usefull for me

Topfullstacker · Accepted Answer · 2022-06-07 07:53:13Z

1

You can't use React Hooks such as useState in class component. It only works in functional component. If you want to use state in class component, please follow as:

class PostIndex extends React.Component {
   state = {posts: []}; // define state
        .....
   this.setState({
       posts: ['a', 'b']
   }); // set state
        .....
   let temp = this.state.posts; // use state
        .....

I hope this will help you. Thanks.

answered Jun 7, 2022 at 7:53

Topfullstacker

1296 bronze badges

3 Comments

funderjimed ieinc Over a year ago

thanks for giving me sample code, i will try it

funderjimed ieinc Over a year ago

but can i call fectdata function without useEffect hook?

Topfullstacker Over a year ago

Of course, you can call fetchdata function without useEffect hook. You can use componentDidMount() lifecycle instead of useEffect in class component.

Collectives™ on Stack Overflow

ReactJS : Parsing error: Unexpected token

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related