title: Objects are not valid as a React child (found: object with keys {username})
body: <p>I'm starting to learn React and following the tutorial and got stuck with this error when I was trying to upload picture. When I press upload button, this error &quot;Objects are not valid as a React child (found: object with keys {username}). If you meant to render a collection of children, use an array instead.&quot; shown up and I couldn't reload the page anymore.
  <a href="https://i.stack.imgur.com/x9UcE.jpg" rel="nofollow noreferrer">Render Error</a>
  Here are the codes:</p>
  <p>1.App.js</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import './App.css';
  import Post from './Post';
  import { auth, db } from &quot;./firebase&quot;;
  import Modal from '@material-ui/core/Modal';
  import { makeStyles } from '@material-ui/core/styles';
  import { Button, Input } from &quot;@material-ui/core&quot;;
  import ImageUpload from './ImageUpload';
  
  function getModalStyle() {
    const top = 50;
    const left = 50;
  
    return {
      top: `${top}%`,
      left: `${left}%`,
      transform: `translate(-${top}%, -${left}%)`,
    };
  }
  
  const useStyles = makeStyles((theme) =&gt; ({
    paper: {
      position: 'absolute',
      width: 400,
      backgroundColor: theme.palette.background.paper,
      border: '2px solid #000',
      boxShadow: theme.shadows[5],
      padding: theme.spacing(2, 4, 3),
    },
  }));
  
  function App() {
    const classes = useStyles();
    const [modalStyle] = React.useState(getModalStyle);
    const [posts, setPosts] = useState([]);
    const [open, setOpen] = useState(false);
    const [openSignIn, setOpenSignIn] = useState('');
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [user, setUser] = useState(null);
    //UseEffect -&gt; Run a piece of code based on a specific condition
  
    useEffect(() =&gt; {
      const unsubscribe = auth.onAuthStateChanged((authUser) =&gt; {
        if (authUser) {
          //user has logged in...
          console.log(authUser);
          setUser(authUser);
        } else {
          //user has logged out...
          setUser(null);
        }
  
        return () =&gt; {
          //perform some cleanup action
          unsubscribe();
        }
      })
    }, [user, username]);
  
    useEffect(() =&gt; {
      //this is where the code runs
      db.collection('posts').onSnapshot(snapshot =&gt; {
        //everytime a new post is added, this code fires...
        setPosts(snapshot.docs.map(doc =&gt; ({
          id: doc.id,
          post: doc.data()
        })));
      })
    }, []);
  
    const signUp = (event) =&gt; {
      event.preventDefault();
      auth
        .createUserWithEmailAndPassword(email, password)
        .then((authUser) =&gt; {
          return authUser.user.updateProfile({
            displayName: username
          })
        })
        .catch((error) =&gt; alert(error.message))
    }
  
  
    const signIn = (event) =&gt; {
      event.preventDefault();
      auth
        .signInWithEmailAndPassword(email, password)
        .catch((error) =&gt; alert(error.message))
  
      setOpenSignIn(false);
    }
  
    return (
      &lt;div className=&quot;app&quot;&gt;
  
        {user?.displayName ? (
          &lt;ImageUpload username={user.displayName} /&gt;
        ) : (
            &lt;h3&gt;Sorry you need to login to upload&lt;/h3&gt;
          )}
  
  
        &lt;Modal
          open={open}
          onClose={() =&gt; setOpen(false)}
        &gt;
          &lt;div style={modalStyle} className={classes.paper}&gt;
            &lt;form className=&quot;app__signup&quot;&gt;
              &lt;center&gt;
                &lt;img
                  className=&quot;app__headerImage&quot;
                  src=&quot;https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png&quot;
                  alt=&quot;&quot;
                /&gt;
              &lt;/center&gt;
              &lt;Input
                placeholder=&quot;username&quot;
                type=&quot;text&quot;
                value={username}
                onChange={(e) =&gt; setUsername(e.target.value)}
              /&gt;
              &lt;Input
                placeholder=&quot;email&quot;
                type=&quot;text&quot;
                value={email}
                onChange={(e) =&gt; setEmail(e.target.value)}
              /&gt;
              &lt;Input
                placeholder=&quot;password&quot;
                type=&quot;password&quot;
                value={password}
                onChange={(e) =&gt; setPassword(e.target.value)}
              /&gt;
              &lt;Button type=&quot;submit&quot; onClick={signUp}&gt;Sign Up&lt;/Button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
  
        &lt;Modal
          open={openSignIn}
          onClose={() =&gt; setOpenSignIn(false)}
        &gt;
          &lt;div style={modalStyle} className={classes.paper}&gt;
            &lt;form className=&quot;app__signup&quot;&gt;
              &lt;center&gt;
                &lt;img
                  className=&quot;app__headerImage&quot;
                  src=&quot;https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png&quot;
                  alt=&quot;&quot;
                /&gt;
              &lt;/center&gt;
              &lt;Input
                placeholder=&quot;email&quot;
                type=&quot;text&quot;
                value={email}
                onChange={(e) =&gt; setEmail(e.target.value)}
              /&gt;
              &lt;Input
                placeholder=&quot;password&quot;
                type=&quot;password&quot;
                value={password}
                onChange={(e) =&gt; setPassword(e.target.value)}
              /&gt;
              &lt;Button type=&quot;submit&quot; onClick={signIn}&gt;Sign In&lt;/Button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
  
        &lt;div className=&quot;app__header&quot;&gt;
          &lt;img
            className=&quot;app__headerImage&quot;
            src=&quot;https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png&quot;
            alt=&quot;&quot; /&gt;
        &lt;/div&gt;
        {user ? (
          &lt;Button onClick={() =&gt; auth.signOut()}&gt;Logout&lt;/Button&gt;
        ) : (
            &lt;div className=&quot;app__loginContainer&quot;&gt;
              {/* : is stand for OR */}
              &lt;Button onClick={() =&gt; setOpenSignIn(true)}&gt;Sign In&lt;/Button&gt;
              &lt;Button onClick={() =&gt; setOpen(true)}&gt;Sign Up&lt;/Button&gt;
            &lt;/div&gt;
  
          )}
  
        &lt;h1&gt;Hello Joes! Let's build an Instagram CLone with React&lt;/h1&gt;
        {
          posts.map(({ id, post }) =&gt; (
            &lt;Post key={id} username={post.username} caption={post.caption} imgUrl={post.imgUrl} /&gt;
          ))
        }
  
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Here is the ImageUpload file
  2. ImageUpload.js</p>
  <pre class="lang-js prettyprint-override"><code>import { Button } from '@material-ui/core'
  import React, { useState } from 'react';
  import { storage, db } from './firebase';
  import firebase from &quot;firebase&quot;;
  
  function ImageUpload(username) {
  
      const [image, setImage] = useState(null);
      const [progress, setProgress] = useState(0);
      const [caption, setCaption] = useState('');
  
      const handleChange = (e) =&gt; {
          if (e.target.files[0]) {
              setImage(e.target.files[0]);
          }
      };
  
      const handleUpload = () =&gt; {
          const uploadTask = storage.ref(`images/${image.name}`).put(image);
          uploadTask.on(
              &quot;state_change&quot;,
              (snapshot) =&gt; {
                  //progress funtion...
                  const progress = Math.round(
                      (snapshot.bytesTransferred / snapshot.totalBytes) * 100
                  );
                  setProgress(progress);
              },
              (error) =&gt; {
                  //Error function...
                  console.log(error);
                  alert(error.message);
              },
              () =&gt; {
                  // Complete function...
                  storage
                      .ref(&quot;images&quot;)
                      .child(image.name)
                      .getDownloadURL()
                      .then(url =&gt; {
                          // Post image on db
  
                          db.collection(&quot;posts&quot;).add({
                              timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                              caption: caption,
                              imageUrl: url,
                              username: username
                          });
                          setProgress(0);
                          setCaption(&quot;&quot;);
                          setImage(null);
                      });
              }
          );
      };
  
  
      return (
          &lt;div&gt;
              {/* I want to have... */}
              {/* Caption input */}
              {/* File picker */}
              {/* Post button */}
              &lt;progress value={progress} max=&quot;100&quot; /&gt;
              &lt;input type=&quot;text&quot; placeholder=&quot;Enter a caption...&quot; onChange={event =&gt; setCaption(event.target.value)} value={caption} /&gt;
              &lt;input type=&quot;file&quot; onChange={handleChange} /&gt;
              &lt;Button onClick={handleUpload}&gt;
                  Upload
          &lt;/Button&gt;
          &lt;/div&gt;
      )
  }
  export default ImageUpload
  </code></pre>
  <p>Thanks guys!</p>