CommunityChannelList.jsx

return (
      <div className="community-channel-list">
        <div className="community-channel-list__title" >Open Channels</div>
        <button className="community-channel-create-iconbutton" onClick={showForm}>+</button>
        {
          showingForm && (
             <AddCommunityChannel 
                  setShowingForm={setShowingForm}
                  sdk={sdk}
                  userId={userId}
            />
          )
        }
        <div className="community-channel-list__list">
          {channels.length === 0 ? (
            "No Channels"
          ) : (
            <div className="community-channel-list__scroll-wrap">
              <div>
                {channels.map((c) => (
                  <OpenChannelPreview
                    key={c.url}
                    channel={c}
                    selected={c.url === currentChannelUrl}
                    onClick={() => {
                      setCurrentChannel(c);
                    }}
                  />
                ))}
              </div>
            </div>
          )}
        </div>
        <div className="community-channel-list__footer">
          <Profile user={user} />
        </div>
      </div>
    );
  }