How to map transition in mui?-CodePudding

I want to map my products in mui and put each one in Grow, but with this error Warning: Failed prop type: Invalid prop children of type array supplied to ForwardRef(Grow), expect a single ReactElement . I will be what should i do

if (enter) {
    return (
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, 250px)",
          gap: "10px",
          alignItems: "center",
          justifyContent: "space-evenly",
          padding: "0 50px",
          height: "100%",
        }}
      >
        {searchState.length ? (
          <>
            <Grow in={true}>
              {searchState.map((item) => (
                <Product key={item.id} productData={item} />
              ))}
            </Grow>
            <Grow
              in={true}
              style={{ transformOrigin: "0 0 0" }}
              {...(true ? { timeout: 1000 } : {})}
            >
              {searchState.map((item) => (
                <Product key={item.id} productData={item} />
              ))}
            </Grow>
          </>
        ) : (
          <Box sx={{stylesNone}>No products found</Box>
        )}
      </Box>
    );
  }

CodePudding user response：

You can wrap your mapped components with a div or fragment (<></>)

<Grow in={true}>
   <>
       {searchState.map((item) => (
         <Product key={item.id} productData={item} />
       ))}
   </>
</Grow>