Skip to content

Object doesn't support property or method 'map' #44

@lostrouter

Description

@lostrouter

I am trying out Reactjs.Net and i am running into an error. I have chosen to forgo using jsx in favor of plain JS. i am not sure if this is the cause of my problem, but i am following the compiled js examples i have found in the reactjs tutorials. array.map.js is the code found here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map. Do i have to use jsx?

the specific error
Error while rendering "BreadCrumbBox" to "react1": Object doesn't support property or method 'map'
Line: 8
Column:9

// SimpleReactor.js
var BreadCrumbBox = React.createClass({
    render: function () {
        var crumblets = this.props.crumbs.map(function (item, index) {
            return BreadCrumb({
                crumb: item,
                key: index
            });
        });
        return React.DOM.ul({}, crumblets);
    }
});


var BreadCrumb = React.createClass({
    render: function () {
        return React.DOM.ul({},
        React.DOM.a({
            href: this.props.crumb.Url.toString()
        }, this.props.crumb.Text));
    }
});

BreadCrumbBox = React.createFactory(BreadCrumbBox);
BreadCrumb = React.createFactory(BreadCrumb);

the above is my react script.

here is my react config

ReactSiteConfiguration.Configuration
            .AddScript("~/Scripts/array.map.js")
            .AddScript("~/Scripts/SimpleReactor.js");

here is my cshtml page

@using System
@using System.Web.Mvc
@using System.Web.Mvc.Ajax
@using System.Web.Mvc.Html
@using System.Web.Optimization
@using System.Linq
@using React
@using React.Web
@using React.Web.Mvc

@inherits System.Web.Mvc.WebViewPage<BreadCrumbModel>


@Html.React("BreadCrumbBox", new { crumbs = Model.Crumbs })

@section scripts{
    @Scripts.Render("~/Scripts/array.map.js")
    <script src="http://fb.me/react-0.12.0.js"></script>
    @Scripts.Render("~/Scripts/SimplerReactor.js")
    @Html.ReactInitJavaScript()
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions