how to display the data of array in react?

Question

HI I am trying to display data of array in list. I am getting undefined error why ?

here is my code http://codepen.io/naveennsit/pen/oxRwYM

var stations = [
  {call:'station one',frequency:'000'},
  {call:'station two',frequency:'001'}
]; 
class App extends React.Component {

  render (){
    var stationComponents = this.props.name.map(function(station) {
            return <div className="station">{station.call}</div>;
        });
        return <div>{stationComponents}</div>;
  }
   handleClick(e){
     alert('--')
   } 

}


React.render(<App name='{stations}'>ssssss</App>,document.getElementById('app'))

Remove ', should be <App name={ stations }>ssssss</App>

Oleksandr T.
– Oleksandr T.

2016-05-17 10:15:57 +00:00
Commented May 17, 2016 at 10:15 — Oleksandr T.
– Oleksandr T., Commented May 17, 2016 at 10:15
thanks got the solutuion ..any react js good tutorial

user944513
– user944513

2016-05-17 10:17:01 +00:00
Commented May 17, 2016 at 10:17 — user944513
– user944513, Commented May 17, 2016 at 10:17

Joe Clay · Accepted Answer · 2016-05-17 10:16:29Z

1

You shouldn't wrap props in quotes, as that turns them into a string literal. You're getting an undefined error because you're effectively trying to call map() on the string "{stations}", rather than your stations object.

Replace <App name='{stations}'>ssssss</App> with <App name={stations}>ssssss</App>.

answered May 17, 2016 at 10:16

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to display the data of array in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related