TypeError: Cannot read property 'map' of undefined. Can't find a solution

It seems that props.courses is undefined at some point; probably before data is asynchronously loaded.

You have a few options!

Option 1: Default courses to an empty array. This will solve the error but maybe confusing to users because the loading state is unclear

const Module = (props) => {
  const courses = props.courses || [];
  console.log(props.courses);
  let Course = courses.map(item=><li>{item}</li>)
  return(
    <ul>{Course}</ul>
  )
}

Option 2: Only map over the data when it exists; otherwise display a loading indicator. This might be better for user experience.

const Module = (props) => {
  const courses = props.courses;

  if (!courses) {
    return "Loading...";
  }

  let Course = courses.map(item=><li>{item}</li>)
  return(
    <ul>{Course}</ul>
  )
}

Make sure that props contains data:

import React from 'react';

const Module = (props) => {
    const { courses } = props;
    const Course = courses && courses.length > 0 ? courses.map(item=><li>{item}</li>) : null;
    return Course ? (<ul>{Course}</ul>) : null;
}

export default Module;

You can use destructuring, as well as default parameters to prevent the above error, and reduce code.

const Module = ({courses = []}) => {
    console.log(courses);
    return <ul>
        {courses.map(item=><li>{item}</li>)}
    </ul>;
};