InfoBar Component not visible after rendering-CodePudding

I am building a page using React Js, which involves various components. But I don't know why, the InfoBar Component is not visible, whereas others seem to work fine. I am not able to find any error within the code section of the component. Can someone help me out??? Here are those components: InfoBar.js

import React from "react";
import closeIcon from "../../icons/closeIcon.png";
import onlineIcon from "../../icons/onlineIcon.png";
import "./InfoBar.css";

const InfoBar=({room})=>{
    <div className="infoBar">
        <div className="leftInnerContainer">
            <img className="onlineicon" src={onlineIcon} alt="online"></img>
            <h3>{room}</h3>
        </div>
        <div className="rightInnerContainer">
            <a href="/"><img src={closeIcon} alt="close icon"></img></a>
        </div>
    </div>
}

export default InfoBar;

InfoBar.css

.infoBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2979FF;
    border-radius: 4px 4px 0 0;
    height: 60px;
    width: 100%;
  }
  
  .leftInnerContainer {
    flex: 0.5;
    display: flex;
    align-items: center;
    margin-left: 5%;
    color: white;
  }
  
  .rightInnerContainer {
    display: flex;
    flex: 0.5;
    justify-content: flex-end;
    margin-right: 5%;
  }
  
  .onlineIcon {
    margin-right: 5%;
  }

Chat.js :The parent component

import InfoBar from "../InfoBar/InfoBar";
.
.
return (
        <div className="outerContainer">
            <div className="container">
                <InfoBar room={room}></InfoBar>
                <Messages messages={messages} name={name}></Messages>
                <Input message={message} setMessage={setMessage} sendMessage={sendMessage}></Input>
            </div>
            <TextContainer users={users}></TextContainer>
        </div>
    )

The props being passed to the component do contain values, I am sure of that.

CodePudding user response：

You don't appear to be returning anything from InfoBar, try:

const InfoBar = ({ room }) => (
    <div className="infoBar">
        <div className="leftInnerContainer">
            <img className="onlineicon" src={onlineIcon} alt="online"></img>
            <h3>{room}</h3>
        </div>
        <div className="rightInnerContainer">
            <a href="/"><img src={closeIcon} alt="close icon"></img></a>
        </div>
    </div>
)

Note the use of ( over {.

It's likely there will be an error telling you this.