React 语法错误 - 解析错误：意外的标记，

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.

Answer 1

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

Answer 2

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