ReactJS throws exception on simple JSX text

Question

I am currently facing this error:

Line 14:11: Expected an assignment or function call and instead saw an expression no-unused-expressions

My code looks this way:

import React, { Component } from "react"; import { Checkbox } from "./Checkbox"; export const Tasks = () => { const tasks = []; let projectName = ""; return ( <div className="tasks" data-testid="tasks"> <h2 data-testid="project-name">{projectName}</h2> <ul className="tasks__list"> {tasks.map(task => { <li key={task.id}> <Checkbox id={task.id} /> <span>{task.task}</span> </li>; })} </ul> </div> ); };

According to the error, the problem occurs on the line <li key={task.id}>. I read other posts related to this error but couldn't fix it.

You don't return from the map callback.

jonrsharpe
– jonrsharpe

2020-03-24 12:37:33 +00:00
Commented Mar 24, 2020 at 12:37 — jonrsharpe
– jonrsharpe, Commented Mar 24, 2020 at 12:37

Sagiv b.g · Accepted Answer · 2020-03-24 12:45:45Z

Not sure if this is a typo but it seems that you forgot to return inside your map callback:

tasks.map(task => { return (<li key={task.id}> <Checkbox id={task.id} /> <span>{task.task}</span> </li>); })

Edit

As a followup to your comment, arrow functions can return implicitly when there is no body (i.e {}):

() => 'the returned value'

Or multiline returned expression:

() => ( <div> hi </div> )

Not a typo. Just following tutorial and that's what I saw :) But after closer look I saw that instead of task => { the tutor use taks => (. So I guess task => ( is the same as task => { return ( ...?
Yes. If you omit curly braces, you can only return one expression from fat-arrow function (function with =>). In your case, that expression is your li node wrapped by parentheses.

Kox · Accepted Answer · 2020-03-24 12:38:47Z

Wrap li node into parentheses and return it like so:

{tasks.map(task => { return ( <li key={task.id}> <Checkbox id={task.id} /> <span>{task.task}</span> </li> ); })}

Collectives™ on Stack Overflow

ReactJS throws exception on simple JSX text

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related