No-unused-expressions Reactjs Please assit me

Question

Please fix my issue. I know that you only need these codes to know where the issue is. I am also showing the error. Thanks in advance.

    // importing react and other bootstrap stuff  
   
    import React, { Component } from "react";
    import { Container, ListGroup, ListGroupItem, Button } from "reactstrap";
    import { CSSTransition, TransitionGroup } from "react-transition-group";
    import uuid from "uuid";
        
        class ShoppingList extends Component {
            state = {
                items: [
                    { id: uuid(), name: "Eggs" },
                    { id: uuid(), name: "Milk" },
                    { id: uuid(), name: "Steak" },
                    { id: uuid(), name: "Fruits" },
                    { id: uuid(), name: "Water" },
                ],
            };
            render() {
                const { items } = this.state;
                return (
                    <Container>
                        <Button
                            color="dark"
                            style={{ marginBottom: "2rem" }}
                            onClick={() => {
                                const name = prompt("Enter Item Name...");
                                if (name) {
                                    this.setState((state) => ({
                                        items: [...state.items, { id: uuid(), name }],
                                    }));
                                } else {
                                    alert("You Must Enter Item Name!");
                                }
                            }}>
                            Add Item
                        </Button>
        
                        <ListGroup>
                            <TransitionGroup className="Shopping-list">
                                {items.map(({ id, name }) => {
                                    <CSSTransition
                                        key={id}
                                        timeout={500}
                                        classNames="fade">
                                        <Button
                                            className="remove-btn"
                                            color="danger"
                                            size="sm">
                                            &times;
                                        </Button>
                                        <ListGroupItem>{name}</ListGroupItem>
                                    </CSSTransition>
                                })}
                            </TransitionGroup>
                        </ListGroup>
                    </Container>
                );
            }
        }
        
        export default ShoppingList;

This is the error I am receiving

./src/components/ShoppingList.jsx
Line 41:29:  Expected an assignment or function call and instead saw an expression  no-unused- 
expressions

Search for the keywords to learn more about each error.

I think I gave all The necessary info. If you want to know anything else, please write on comment! I am learning the MERN stack and received this error when doing the client-side work. I hope I will get the answer in time and pray for me that I can learn the MERN stack quickly.

Answer 1

In your map function you are using curly brackets but not explicitly returning that expression. Replace those curly brackets with () and enclose your map body in it like this:

<TransitionGroup className="Shopping-list">
                            {items.map(({ id, name }) => (
                                <CSSTransition
                                    key={id}
                                    timeout={500}
                                    classNames="fade"
                                >
                                    <Button
                                        className="remove-btn"
                                        color="danger"
                                        size="sm"
                                    >
                                        &times;
                                    </Button>
                                    <ListGroupItem>{name}</ListGroupItem>
                                </CSSTransition>
                            ))}
                        </TransitionGroup>

And this should fix it.