json - React "Cannot read property map of undefined" -

trying render errors coming ajax (axios) call in react app modal. i've tried many variations, end same error title. know have array of json objects, i'm not sure i'm going wrong. also, using redux in project, don't think that's issue, i'm noob react. in advance.

the class in question:

import react, {component} 'react'; import {modal, row, col, button} 'react-bootstrap';  class errormodal extends component { closemodal = () => {     this.props.handlemodal('errormodal', false) }    render() {     var erroritems = this.props.data.error.map(function(item){     return (         <div>{item.property} {item.message}</div>     ) })     return(         <modal id="errormodal" bssize="lg" show={this.props.data.errormodal} onhide={this.closemodal}>             <modal.header>                 <modal.title classname="text-center">validation errors</modal.title>             </modal.header>             <modal.body>                 <row>                     <col sm={12} classname="text-center">                          {erroritems}                     </col>                 </row>             </modal.body>             <modal.footer>                 <button onclick={this.closemodal}>close</button>             </modal.footer>         </modal>     ) } }  export default errormodal; 

where errormodal called:

import react, { component } 'react' import { panel, buttontoolbar, button } 'react-bootstrap' import fade 'react-fade'  import previewmodal './previewmodal' import axios 'axios'  class preview extends component { constructor() {     super()      this.state = { modalshow: false } }  togglemodal = () => {     this.setstate({ modalshow: !this.state.modalshow }) }  publishaction = () => {     settimeout(() => {         this.props.handlemodal('savingmodal', true)         settimeout(() => {             axios.post(`/${window.siteid}/validate`, this.props.data)                 .then(response => {                     console.log(response)                     this.props.handlemodal('savingmodal', false)                 })                 .catch(error => {                     this.props.handlemodal('savingmodal', false)                     this.props.handleerror(error.response.data.errors)                     this.props.handlemodal('errormodal', true)                      console.log('validating site data failed.', error.response.data.errors)                 })             this.props.handlemodal('savingmodal', false)         }, 2000)     }) }  render() {     return (         <fade duration={1}>             <panel header="preview summary">                 <p>please review information accuracy. click <strong>preview</strong> button see                 completed site. changes can made selecting appropriate section tab @ top of                 page. when finished, select <strong>publish</strong> make site live.                 congratulations!</p>                 <buttontoolbar classname="pull-right">                     <button bsstyle="primary" onclick={this.togglemodal}>preview</button>                     <button bsstyle="warning" onclick={this.publishaction}>publish</button>                 </buttontoolbar>             </panel>             <previewmodal {...this.props} show={this.state.modalshow} togglemodal={this.togglemodal} />         </fade>     ) } }  export default preview 

the reducer:

import {defaultstate} '../store';  function reducer(state = defaultstate, action) { switch(action.type) {      ...      case 'handle_error':         return {             ...state,             data: {                 ...state.data,                 error: action.error             }         };      default:         return state  } }  export default reducer;  action creator:  // add item specified array export function additem(arr) { const props = {     type: 'add_item',     arr }; switch(arr) {     case 'welcomesections':         return {             ...props,             payload: {welcometitle: '', welcomemessage: ''}         };      ...  export function handleerror(error) { return {     type: 'handle_error',     error } } 

when console log errors axios error .catch, looks this:

enter image description here

console log

i can see array, , believe array of json objects...and based on that, thought above code work... can render {json.stringify(this.props.data.error)} page okay , can see same thing there...what missing?

duh, found component being rendered before error array had been populated. found answer here now:

react js mapstatetoprops triggers uncaught typeerror: cannot read property 'map' of undefined

all had

var erroritems;     if(this.props.data.error) {erroritems = this.props.data.error.map(function(item) {         return (             <div>{item.property} {item.message}</div>         )})     }