Warning: Received `true` for a non-boolean attribute `item`

Question

This error shows in my dev tools when I load my app. I'm not sure how to go about changing it to fix the problem. I suspect it is a reason why when I deploy it to heroku it looks different that when I view it locally so I'm hoping if I fix this it will fix my problem with heroku as well.

Here is my code:

  return (
  <Container className="container" maxWidth="xl">
   
    <CssBaseline />
      {/* <Box sx={{ marginTop: 10, padding: 7, bgcolor: "#eeeeee", borderRadius: "0.3rem" }}> */}
        <Grid className="homeContainer" container spacing={1}>
          <Grid className="topGrid">
            <Grid className="imageContainer" item xs={4} sx={{ }}>
            <img className="cctLogoLarge" src={cctlogo1} alt="outline of horse with parliament buildings in background"></img>
            </Grid>
            <Grid className="introContainer" item xs={12}>
                <p>Welcome to Cap City Trotters! The CCT was created in 2019 by KMAC, Lynch, Bruster, and Damarts. Our Routes include several loops in both Ottawa and Gatineau.
                We are always looking for new members so if you want to join you can take a look at some of our main routes and signup if you like what you see!</p>
                {/* <a href="https://www.strava.com/oauth/authorize?client_id=97775&redirect_uri=http://localhost:3000/home&response_type=code&scope=read_all,activity:read_all">Test Connect to Strava</a> */}
            </Grid>
          </Grid>
        
        <Grid >
          <Grid className="postList-grid">
            {/* {loggedIn && (
              <div className="col-12 mb-3">
                <PostForm />
              </div>
            )} */}
          <Grid item xs={6} sx={{ bgcolor: ""}} className="recentPosts">
              {loading ? (
                <div>Loading...</div>
              ) : (
                <PostList posts={posts}/>
              )}
          </Grid>
              {loggedIn && userData ? (
          <Grid>
              {/* <FriendList
              username={userData.me.username}
              friendCount={userData.me.friendCount}
              friends={userData.me.friends}
              /> */}
          </Grid>
            ) : null}
          </Grid>
        </Grid>
      {/* </Box> */}
      </Grid>
  </Container>
)

I've looked at similar questions and answers but can't figure out how to solve this problem specifically.

Thanks in advance!

Answer 1

I had the same error using the Grid2 component and I resolved it by removing the item from the Grid because the new version doesn't want the item prop.

You can check it in the docs https://mui.com/material-ui/react-grid2/