React syntax error - Parsing error: Unexpected token,-CodePudding

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.

CodePudding user response：

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>
    );

CodePudding user response：

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