My react component return statement fails to render but console.log shows exactly what I need

Question

I am new to react and working on a react video player. I'm having issue implementing the comment section.

This is my videoplayer component itself.

    export default function VidPlayer() {

  // useStates
  const [state, setState] = useState({
    playing: true,
  });
  const [comments, setComments] = useState([]);

  const [comment, setComment] = useState("");

  const { playing } = state;

  const playerRef = useRef(null);

  // declaring functions for video player buttons
  const handlePlayPause = () => {
    setState({ ...state, playing: !state.playing });
  };
  const handleRewind = () => {
    playerRef.current.seekTo(playerRef.current.getCurrentTime() - 5);
  };
  const handleFoward = () => {
    playerRef.current.seekTo(playerRef.current.getCurrentTime() + 5);
  };
  const handleStop = () => {
    playerRef.current.seekTo(0);
    setState({ playing: !state.playing });
  };

  // declaring functions for comment section
  const addComments = () => {
    if (comment) {
      setComments({...comments, comment});
      setComment("");
      console.log("Hello", comments);
    }
  };

  const handleComment = (e) => {
    setComment(e.target.value);
  };


  return (
    <div>
      <AppBar style={{ background: "#e6880e" }} position="static">
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            Favour's Video Player
          </Typography>
        </Toolbar>
      </AppBar>

      {/* container for the videoplayer, buttons and comment section */}
      <div className="container">
        <>
          {/* videoplayer */}
          <div className="reactPlayer one">
            <ReactPlayer
              ref={playerRef}
              url="https://www.youtube.com/watch?v=1_ATK0BLc8U&t=3s"
              playing={playing}
              controls
            />
          </div>

          {/* buttons */}
          <div className="btn-stack two">
            <Stack spacing={2} direction="row">
              <Button
                style={{ background: "#e6880e" }}
                size="small"
                variant="contained"
                onClick={handlePlayPause}
              >
                Play
              </Button>
              <Button
                style={{ background: "#e6880e" }}
                size="small"
                variant="contained"
                onClick={handleRewind}
              >
                Rewind{" "}
              </Button>
              <Button
                style={{ background: "#e6880e" }}
                size="small"
                variant="contained"
                onClick={handleFoward}
              >
                Forward{" "}
              </Button>
              <Button
                style={{ background: "#e6880e" }}
                size="small"
                variant="contained"
                onClick={handleStop}
              >
                Stop
              </Button>
            </Stack>
          </div>

          {/* comment section */}
          <div className="comment three">
            <Comment userComs={comments} />
            <TextField
              placeholder="add comment"
              size="small"
              variant="outlined"
              onChange={handleComment}
              value={comment}
            />
            <Button
              style={{ background: "#e6880e", marginLeft: '1em' }}
              onClick={addComments}
              variant="contained"
              size="small"
            >
              Send
            </Button>
          </div>
        </>
      </div>
    </div>
  );
}

It takes in this comments component towards the end.

export default function commentList(props) {
  console.log("Hello brian", props.userComs);

  const { userComs } = props;

  if (Object.keys(userComs).length > 0) {
    console.log(userComs);

    // userComs.forEach((element) => {
    // console.log("Im in", userComs);
      Object.values(userComs).forEach(val  => {
      // console.log("Im in", userComs);
      // console.log(val);

      return (
        <div>
        <List
          sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
        >
          
          <ListItem alignItems="flex-start">
            <ListItemAvatar>
              <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            </ListItemAvatar>
            <ListItemText
              secondary={
                <React.Fragment>
                  <Typography
                    sx={{ display: "inline" }}
                    component="span"
                    variant="body2"
                    color="text.primary"
                  >
                    Ali Connors
                  </Typography>
                  {val}
                </React.Fragment>
                
              }
              
            />
          </ListItem>
          <Divider variant="inset" component="li" />
        </List>
        </div>
      );
      
    });
  } else {
    return <div></div>;
  }

}

This is the Front-End enter image description here Unfortunately, when I enter a comment and click send, the screen goes blank and console throws a "nothing was returned from render" error. Can someone help me check what is wrong and how I can fix this please?

Answer 1

As the error says, the component isn't returning anything.

Object.values(userComs).forEach(val  => {

should be

return Object.values(userComs).map(val  => {

because forEach doesn't return anything and the JSX returned in each iteration will not be used anywhere, but map returns a new array that React can use.

BTW make sure to give a key prop to each div that is returned from the callback.

<div key={val}> // assuming `val` is unique