score:0

Accepted answer

this is untested, but something like this should work. loop over the month keys using object.keys, then reduce each set of birthdays to a flat array:

render() {
    return ( 
      <div>
        {object.keys(this.state.birthdays).reduce((birthdays, month) => {
            return birthdays.concat(this.state.birthdays[month].map((bday) => {
                return (
                    <p>{bday.name} - {bday.date}</p>
                );
            }));
        }, [])}
      </div>
    );
}

score:1

try this:

{ object.keys(this.state.birthdays).map(this.renderbirthdays) }

and then above your render function create a function called renderbirthdays like this:

renderbirthdays: function(key) {
    return (
         <div key={key} index={key} details={this.state.birthdays[key]}>
              {details.name} - {details.date}
         </div>
    )
},
render: function() {
    return (
        <div>{ object.keys(this.state.birthdays).map(this.renderbirthdays) }</div>
    )
}

so you can take advantage of javascripts map which will take your object and key them. then we're going to pass this key into a function called renderbirthdays which will iterate over the item. we need to pass a key and an index into the element, and for ease of use, we can pass a details prop into it equal to the currently selected item it's iterating over. that way we can just use {details.name} etc in the element.


Related Query

More Query from same tag