ChannelSingle.js

import { Link, Route, Switch, useParams } from "react-router-dom";

const ChannelSingle = (props) => {
  const { roomId } = useParams();
  console.log('props', props.channel)
  return (
    <div>
      <div
        className="overflow-auto"
        style={{ height: "610px" }}
      >
        {props.channel.map((el) => (
          <div className="mb-3">
            <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
              <Link to={`${roomId}/${el.channelName}`}>
                <img
                  className="col-auto mt-2"
                  src="/fullSpeaker.png"
                  width="25px"
                  height="25px"
                />
                <h5 className="col mt-2" style={{ color: "black" }}>
                  {el.channelName}
                </h5>
              </Link>
            </div>

            {el.joinName && el.joinName.map((e) =>
              <div><ul className="mx-5" style={{ color: "#76D079" }}>
                <li>
                  <p style={{ color: "black" }}>{e}</p>
                </li>
              </ul></div>)}
          </div>))}
        </div>
    </div>
  );
};

export default ChannelSingle;