javascript - Unable to get property 'map' of nested array in React.js -
i'm having issue mapping array in react.js. below snippet of code i'm working on:
var movelistitemcomponent = react.createclass({ render: function () { return ( <div classname="move_list_item"> <p classname="character_list_item_country">{this.props.move.move_name}</p> </div> ); } }); var movelistcomponent = react.createclass({ render: function(){ var moves = this.props.moveset.map(function(move){ return( <movelistitemcomponent key={move.move_name} move={move} /> ); }); return ( <div> {moves} </div> ); } }); var characterpage = react.createclass({ getinitialstate: function() { return {character: {}}; }, componentdidmount: function() { this.props.service.findbyid(this.props.characterid).done(function(result) { this.setstate({character: result}); }.bind(this)); }, render: function () { return ( <div> <headercomponent text="character details"/> <div> <div classname="charcater_page_top_info"> <img classname="character_page_icon" src={this.state.character.icon} /> <div classname="character_page_info"> <h3 classname="character_page_name">{this.state.character.name}</h3> <p classname="character_page_country">{this.state.character.country}</p> </div> </div> <p classname="character_page_tagline"><i>{this.state.character.tagline}</i></p> <div classname="character_page_stats"> </div> <div> <h2>special moves</h2> <p>{this.state.character.tagline}</p> <movelistcomponent moveset={this.state.character.special_moves} /> </div> </div> </div> ); } }); and data i'm accessing is:
characters = [ {"id": 1, "name": 'ryu', "country": 'japan', "tagline":"you must defeat sheng long stand chance.", "stats":{"power": 7, "speed": 7, "jump": 7, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/3/37/portrait_sf2_ryu.png', "character_list_item_backgroundcolor": "#ff9b9b"}, {"id": 2, "name": 'e. honda', "country": 'japan', "tagline":"can't better that?", "stats":{"power": 9, "speed": 6, "jump": 6, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/5/5a/portrait_sf2_ehonda.png', "character_list_item_backgroundcolor": "#9bb9ff"}, {"id": 3, "name": 'blanka', "country": 'brazil', "tagline":"seeing in action joke.", "stats":{"power": 7, "speed": 6, "jump": 6, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/a/ad/portrait_sf2_blanka.png', "character_list_item_backgroundcolor": "#a4cc9b"}, {"id": 4, "name": 'guile', "country": 'usa', "tagline":"go home , family man.", "stats":{"power": 8, "speed": 8, "jump": 7, "range": 8}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/4/4e/portrait_sf2_guile.png', "character_list_item_backgroundcolor": "#f3ff8e"}, {"id": 5, "name": 'ken', "country": 'usa', "tagline":"attack me if dare, crush you.", "stats":{"power": 7, "speed": 7, "jump": 7, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/5/50/portrait_sf2_ken.png', "character_list_item_backgroundcolor": "#ff8466"}, {"id": 6, "name": 'chun li', "country": 'china', "tagline":"i'm strongest woman in world.", "stats":{"power": 6, "speed": 9, "jump": 9, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/e/e2/portrait_sf2_chunli.png', "character_list_item_backgroundcolor": "#6670ff"}, {"id": 7, "name": 'zangief', "country": 'ussr', "tagline":"my strength greater yours.", "stats":{"power": 7, "speed": 5, "jump": 4, "range": 4}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/8/81/portrait_sf2_zangief.png', "character_list_item_backgroundcolor": "#ffa551"}, {"id": 8, "name": 'dhalsim', "country": 'india', "tagline":"i meditate , destroy you.", "stats":{"power": 5, "speed": 4, "jump": 6, "range": 10}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/8/88/portrait_sf2_dhalsim.png', "character_list_item_backgroundcolor": "#ffea51"} ]; so renders nicely except movelistcomponent. i'm pretty sure issue how mapped in movelistcomponent class, don't know wrong. using same method render list of characters, , worked out me. missing reference list of special moves?
my full code can seen here https://github.com/choragosdesigns/choragosdesigns.github.io. thank in advance.
issue in line:
<movelistcomponent moveset={this.state.character.special_moves} /> character array of object, access special_moves of object, need specify index also, use this:
<movelistcomponent moveset={this.state.character[0].special_moves} /> or use map on this, this:
{ this.state.character.map( (item, i) => { return <movelistcomponent moveset={item.special_moves} /> }) } check character array:
character = [ {... "special_moves": [ {"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"} ], },{...} ] check working code:
var characters = [ {"id": 1, "name": 'ryu', "country": 'japan', "tagline":"you must defeat sheng long stand chance.", "stats":{"power": 7, "speed": 7, "jump": 7, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/3/37/portrait_sf2_ryu.png', "character_list_item_backgroundcolor": "#ff9b9b"}, {"id": 2, "name": 'e. honda', "country": 'japan', "tagline":"can't better that?", "stats":{"power": 9, "speed": 6, "jump": 6, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/5/5a/portrait_sf2_ehonda.png', "character_list_item_backgroundcolor": "#9bb9ff"}, {"id": 3, "name": 'blanka', "country": 'brazil', "tagline":"seeing in action joke.", "stats":{"power": 7, "speed": 6, "jump": 6, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/a/ad/portrait_sf2_blanka.png', "character_list_item_backgroundcolor": "#a4cc9b"}, {"id": 4, "name": 'guile', "country": 'usa', "tagline":"go home , family man.", "stats":{"power": 8, "speed": 8, "jump": 7, "range": 8}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/4/4e/portrait_sf2_guile.png', "character_list_item_backgroundcolor": "#f3ff8e"}, {"id": 5, "name": 'ken', "country": 'usa', "tagline":"attack me if dare, crush you.", "stats":{"power": 7, "speed": 7, "jump": 7, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/5/50/portrait_sf2_ken.png', "character_list_item_backgroundcolor": "#ff8466"}, {"id": 6, "name": 'chun li', "country": 'china', "tagline":"i'm strongest woman in world.", "stats":{"power": 6, "speed": 9, "jump": 9, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/e/e2/portrait_sf2_chunli.png', "character_list_item_backgroundcolor": "#6670ff"}, {"id": 7, "name": 'zangief', "country": 'ussr', "tagline":"my strength greater yours.", "stats":{"power": 7, "speed": 5, "jump": 4, "range": 4}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/8/81/portrait_sf2_zangief.png', "character_list_item_backgroundcolor": "#ffa551"}, {"id": 8, "name": 'dhalsim', "country": 'india', "tagline":"i meditate , destroy you.", "stats":{"power": 5, "speed": 4, "jump": 6, "range": 10}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/8/88/portrait_sf2_dhalsim.png', "character_list_item_backgroundcolor": "#ffea51"} ]; var movelistitemcomponent = react.createclass({ render: function () { return ( <div classname="move_list_item"> <p classname="character_list_item_country">{this.props.move.move_name}</p> </div> ); } }); var movelistcomponent = react.createclass({ render: function(){ var moves = this.props.moveset.map(function(move){ return( <movelistitemcomponent key={move.move_name} move={move} /> ); }); return ( <div> {moves} </div> ); } }); var characterpage = react.createclass({ getinitialstate: function() { return {character: characters}; }, render: function () { return ( <div> <h2>special moves</h2> <p>{this.state.character[0].tagline}</p> { this.state.character.map( (item, i) => { return <movelistcomponent moveset={item.special_moves} /> }) } </div> ); } }); reactdom.render(<characterpage/>, document.getelementbyid('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/>
Comments
Post a Comment