In my project, I have 2 arrays being read from Firestore.

**courseList** - A list of courses of which a user is enrolled in

**courses** - A list of all of the courses available in the project

I would like to compare these using a .map so that in my course portal, only the courses of which the user is enrolled in is rendered.

Here is what the arrays look like:

**courseList:**

[![enter image description here](https://i.stack.imgur.com/nkiBY.png)](https://i.stack.imgur.com/nkiBY.png)

**courses**

[![enter image description here](https://i.stack.imgur.com/Wx3AG.png)](https://i.stack.imgur.com/Wx3AG.png)

I know the arrays work, however, the .map doesn't seem to be working!

Here's my code:

```
const {courses} = this.state
const {courseList} = this.state

{

                  courses.length && courses.map (course => {

                         if (course.courseUrl === courseList.CourseCode) {

                              return (
                                 <div className = "CourseTile" key = {course.courseName}>

                                   <div className = "CourseTitle">
                                        <h1> {course.courseName}</h1>
                                  </div>

                                  <div className = "CourseDescription">
                                        <p> {course.courseSummary}</p>
                                  </div>

                                  <Link to={`/course/${course.courseUrl}/courseinformation`}> <button className = "LetsGoButton"> Take course</button> </Link>

                                </div>
                              )
                        }

                          else return null;

                  }
                )

}

```

If I replace

```
if (course.courseUrl === courseList.CourseCode)

```

with

```
if (course.courseUrl === "websitedesign")

```

It renders the website design course only, So I believe there's something wrong with this line.

Any help would be appreciated.