Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead

Question

I am trying to display a real-time list of channels in my app and this is the code which gives me the error -

    function Sidebar() {
  const user = useSelector(selectUser);
  const [channels, setChannels] = useState([]);

  useEffect(() => {
    db.collection("channels").onSnapshot((snapshot) => {
      setChannels(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          channel: doc.data(),
        }))
      );
    });
  }, []);

  const addChannel = () => {
    const channelName = prompt("Enter channel name");

    if (channelName) {
      db.collection("channels").add({
        channelName,
      });
    }
  };

  return (
    <div className="sidebar">
      <div className="sidebar_top">
        <h3>Discord Clone</h3>
        <ExpandMoreIcon className="expandMoreIcon" />
      </div>

      <div className="sidebar_channels">
        <div className="sidebarChannels_header">
          <div className="header">
            <ExpandMoreIcon className="expandMoreIcon" />
            <h4>Text Channels</h4>
          </div>

          <IconButton className="IconButton">
            <AddIcon className="addIcon" onClick={addChannel} />
          </IconButton>
        </div>

        <div className="sidebar_channelList">
          {channels.map(({ id, channel }) => (
            <SidebarChannel
              key={id}
              id={id}
              channelName={channel.channelName}
            />
          ))}
        </div>
      </div>

      <div className="sidebar_voice">
        <SignalCellularAltIcon className="voiceIcon" />
        <div className="sidebar_voiceInfo">
          <h4>Voice Connected</h4>
          <p>Stream</p>
        </div>

        <div className="sidebar_voiceIcons">
          <InfoIcon className="icon" />
          <CallIcon className="icon" />
        </div>
      </div>

      <div className="sidebar_profile">
        <Avatar onClick={() => auth.signOut()} src={user.photo} />
        <div className="sidebar_profileInfo">
          <h4>{user.displayName}</h4>
          <p>#{user.uid.substring(0, 5)}</p>
        </div>

        <div className="sidebar_profileIcons">
          <MicIcon className="icon" />
          <HeadsetIcon className="icon" />
          <SettingsIcon className="icon" />
        </div>
      </div>
    </div>
  );
}

export default Sidebar;

After I create a new channel, I get this error - Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

Any idea what's causing the error? Thanks in advance.

Answer 1

Did you check if your state is set correctly? You initialize the channel state correctly:

const [channels, setChannels] = useState([]);

Is your state.channels still a valid array after it has been updated?

I can recommend checking out React Developer Tools for Chrome if u are not already using it. It allows you to see your state in the running application: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi