React syntax error - Parsing error: Unexpected token,

Question

const Sidebar = () => (
    <Stack direction="row" sx={{ overflowY: "auto", height: { sx: 'auto', md:'95%' }, flexDirection: { md: 'column' }, }}
>

 {categories.map((category) => (
    <button className="category-btn" style={{ background: category.name === selectedCategory && '#FC1503', color: 'white' }}
    key={category.name}
 >
   <span style = {{ color: category.name === selectedCategory ? 'white' : 'red', marginRight: '15px'}}>
   {category.icon}</span>
   <span style = {{ opacity: category.name === selectedCategory ? '1' : '0.8'}}>{category.name}</span>
   </button>
 ))}

In the end I get a Line 19:4: Parsing error: Unexpected token (19:4)

Can't seem to understand what is wrong with the brackets on the last line, just started with React and checked this out, rewrote and edited it numerous times to no avail.

missins closing paren ) for your Sidebar ...?

Sudhir Bastakoti
– Sudhir Bastakoti

2023-01-20 11:22:42 +00:00
Commented Jan 20, 2023 at 11:22 — Sudhir Bastakoti
– Sudhir Bastakoti, Commented Jan 20, 2023 at 11:22

PRIYANK GONDALIYA · Accepted Answer · 2023-01-20 12:03:28Z

you need to wrap your component in single parent element which can be div or fragment, also need to close tag like or

const Sidebar = () => (      
      <div>
        <Stack
          direction="row"
          sx={{
            overflowY: "auto",
            height: { sx: "auto", md: "95%" },
            flexDirection: { md: "column" }
          }}
        />
        {categories.map((category) => (
          <button
            className="category-btn"
            style={{
              background: category.name === selectedCategory && "#FC1503",
              color: "white"
            }}
            key={category.name}
          >
            <span
              style={{
                color: category.name === selectedCategory ? "white" : "red",
                marginRight: "15px"
              }}
            >
              {category.icon}
            </span>
            <span
              style={{ opacity: category.name === selectedCategory ? "1" : "0.8" }}
            >
              {category.name}
            </span>
          </button>
        ))}
      </div>
    );

Matthieu BRAULT · Accepted Answer · 2023-01-20 11:31:06Z

0

You forgot to close your properly. 2 possibibilities: <Stack>content</Stack> or <Stack />

answered Jan 20, 2023 at 11:31

Matthieu BRAULT

11 bronze badge

Collectives™ on Stack Overflow

React syntax error - Parsing error: Unexpected token,

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related