simple reactjs component having unexpected token error

Question

what is the error in this react component ?

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Tasks = () => {
  const [tasks, setTasks] = useState([]);
  useEffect(() => {
    axios.get('/tasks').then(response => setTasks(response.data));
    return (
      <ul>
        {renderList(tasks)}
      </ul>
    );
  },[]);
};

renderList(tasks) {
  console.log(tasks)
  return <li>dd</li>
}

export default Tasks;

I can not figure out the error .. seems easy but i dont know where is my error .

    ./src/compononents/Tasks.js
  Line 16:  Parsing error: Unexpected token, expected ";"

  14 | };
  15 | 
> 16 | renderList(tasks) {
     |                   ^
  17 |   console.log(tasks)
  18 |   return <li>dd</li>
  19 | }

It looks like you're missing the => So, renderList(tasks) => { — elarcoiris
– elarcoiris, Commented Aug 19, 2019 at 13:32
The Task component returns undefined since you're returning inside the useEffect instead. Then, it looks like you're confusing the function declaration syntax with the method definition syntax. — Emile Bergeron
– Emile Bergeron, Commented Aug 19, 2019 at 14:55

Vencovsky · Accepted Answer · 2019-08-19 13:37:52Z

4

what is the error in this react component ?

The problem is that the method is outside of the component, and also, the return should be outside of the useEffect.

// component scope
const Tasks = () => {
  const [tasks, setTasks] = useState([]);
  useEffect(() => {
    axios.get('/tasks').then(response => setTasks(response.data));
    // can't return JSX inside useEffect
    return (
      <ul>
        {renderList(tasks)}
      </ul>
    );
  },[]);
};
// component scope

// outside component scope
renderList(tasks) {
  console.log(tasks)
  return <li>dd</li>
}

Here is the full working code

const Tasks = () => {
  const [tasks, setTasks] = useState([]);
  useEffect(() => {
    axios.get('/tasks').then(response => setTasks(response.data));        
  },[]);

  const renderList = tasks => {
      console.log(tasks)
      return tasks.map(() => <li>dd</li>)
  }

  return (
      <ul>
        {renderList(tasks)}
      </ul>
  );
};

But you could make it much more simple like

const Tasks = () => {
  const [tasks, setTasks] = useState([]);
  useEffect(() => {
    axios.get('/tasks').then(response => setTasks(response.data));        
  },[]);

  return (
      <ul>
        {tasks.map(() => <li>dd</li>)}
      </ul>
  );
};

edited Aug 19, 2019 at 13:37

answered Aug 19, 2019 at 13:31

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

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

1 Comment

mercury Over a year ago

thx , worked ,How react know the function which is the component and allow it to return jsx , and prevent the other one ??

Dupocas · Accepted Answer · 2019-08-19 13:31:45Z

2

You can't return JSX from useEffect

  useEffect(() => {
    axios.get('/tasks').then(response => setTasks(response.data));
  },[])

  return (tasks.length && <ul>{tasks.map(/*...*/)}</ul>)

useEffect will only return a function to cleanup. Consider using a boolean to conditionally render your JSX inside render

answered Aug 19, 2019 at 13:31

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

Collectives™ on Stack Overflow

simple reactjs component having unexpected token error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related