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
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> )}) }
Comments
Post a Comment