React - Rails Uncaught TypeError 'map' of data not defined

Question

Hi i'm making a video project in rails and react and I must have missed something because when I try to 'map' data its undefined I'm not sure how to properly pass the variable. It just shows a blank page with just the rails content. Here's what I'm working with.

Table.js

import React, { Component } from 'react'
import Item from './Item'

class Table extends Component {
    constructor(props){
        super(props)
    }

    render(){
        const items = this.props.course_moudules.map( (data) => {
            return <Item key={data.id} title={data.title} description={data.description}/>
        })
        return(
            <div className="pt-5 pb-5">
                <div className="container">
                 <div className="text-center">
                    <h2 className="pt-4 pb-4">React for Rails Developers - Videos</h2>
                </div>

                {items}
                </div>
            </div>
        )
    }
}

export default Table

Item.js

import React, { Component } from 'react'
import Thumbnail from './Thumbnail'

const Item = (props) => {
    return (
        <div className="row">
            <div className="col-md-10 offset-md-1">
                <div className="text-center">
                    <div className="card px-5">
                        <div className="row">
                            <div className="col-md-4">
                                <Thumbnail/>
                            </div>
                            <div className="col-md-8">
                                <div className="pt-4 pb-4">
                                    <h4>{props.title}</h4>
                                    <p>{props.description}</p>
                                    <div className="cta-wrapper">
                                        <a className="btn cta-btn">Watch This Video</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Item

Home.js

import React, { Component } from 'react'
import Jumbotron from './Jumbotron'
import Table from './Table/Table'

class Home extends Component {
    constructor(){
        super()
        this.state = {
            course_modules: [
                { id: 1, title: '1. Setting up a new Ruby on Rails app with React', description: 'lorem ipsum', active: false },
                { id: 2, title: '2. Adding React to an Existing Rails App', description: 'lorem ipsum', active: false },
                { id: 3, title: '3. Building a Hello World App', description: 'lorem ipsum', active: false },
                { id: 4, title: '4. Adding React Router Dom to your Appp', description: 'lorem ipsum', active: false },

            ]
        }
    }
    render() {
        return (
            <div>
            <Jumbotron/>
            <Table course_modules={this.state.course_moudules}/>
            </div>
            )
    }
}

export default Home

Any help would be greatly appreciated I'm just starting with react im somewhat familiar with rails. I'm really not sure what I missed.

Answer 1

Looks like typo. please make sure to use correct variable name course_modules.

const items = this.props.course_modules.map( (data) => {
   return <Item key={data.id} title={data.title} description={data.description}/>
})

here also pls make changes

<Table course_modules={this.state.course_modules}/>