jsx map inside if else condition

Question

I have a condition look like below

{finishedTodos ? <ListItem button divider className={classes.finishCategory} > <ArrowForward className={classes.checkIcon} /> <ListItemText primary={`Finished ${finishedTodos.length}`} style={{color:"tomato"}}/> </ListItem> : null } //--------------------------------------------- {finishedTodos.map((todo) =>( <ListItem button divider> <CheckCircle className={classes.checkIcon} /> <ListItemText primary={todo.title} style={{textDecoration:"line-through",color:"gray"}} /> </ListItem> ))}

so right now what I want to do is I Want to combine these two , and when I tried to put {finishedTodos.map... below the </ListItem>,it reported ": expected" , so I think there's something wrong with formatting , do anyone know how to solve this ?

One thing you can do that is slightly better is use the && operator for the first condition. {finishedTodos && <YourCompoents... /> } — Wolfie
– Wolfie, Commented Aug 25, 2021 at 14:12
Probably because you were returning more than one element from the ternary. Move the mapping code back and wrap the whole block with a fragment (<><ListItem>...{mapcode}</>). — Brian Thompson
– Brian Thompson, Commented Aug 25, 2021 at 14:13
{finishedTodos.map((todo) => is not in same escope. Try if - else if and else — Ricardo de Paula
– Ricardo de Paula, Commented Aug 25, 2021 at 14:15

Remy Smith · Accepted Answer · 2022-01-31 17:56:40Z

JSX requires returned code blocks to be wrapped in a single JSX element, like a <div>. You can also use simple JSX fragments <>...</> to wrap your code.

In this case, I would also recommend using a short circuit operator, &&, instead of a ternary operator ? ... :null for simple if {} statements.

{finishedTodos && <> <ListItem button divider className={classes.finishCategory} > <ArrowForward className={classes.checkIcon} /> <ListItemText primary={`Finished ${finishedTodos.length}`} style={{color:"tomato"}}/> </ListItem> {finishedTodos.map((todo) => <ListItem button divider> <CheckCircle className={classes.checkIcon} /> <ListItemText primary={todo.title} style={{textDecoration:"line-through",color:"gray"}} /> </ListItem> )} </> }

I like that your answer provides some explanation as to why this is the fix. Some small improvements: Even though you put HTML in quotes, I'd call it what it is: JSX since the two are already confusing to new React devs, but are really very different. I woudn't recommend the short circuit operator for most situations because of how it handles some falsy values (ie if finishedTodos is 0, it will actually render 0 instead of nothing).

Viet · Accepted Answer · 2021-08-25 14:13:36Z

Just update like it with Fragment

{ finishedTodos ? ( <> <ListItem button divider className={classes.finishCategory}> <ArrowForward className={classes.checkIcon} /> <ListItemText primary={`Finished ${finishedTodos.length}`} style={{ color: "tomato" }} /> </ListItem> {finishedTodos.map((todo) => ( <ListItem button divider> <CheckCircle className={classes.checkIcon} /> <ListItemText primary={todo.title} style={{ textDecoration: "line-through", color: "gray" }} /> </ListItem> ))} </> ) : null; }

Collectives™ on Stack Overflow

jsx map inside if else condition

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related