javascript - reactJS with an error "TypeError: Cannot read property 'quantity' of undefined" -


i having problem whenever execute function calling value text field has error

my setstate props code:

selectedorder: {     breakdown: [{       size: 'xs',       quantity: '0'     }, {       size: 's',       quantity: '0'     }] } 

my function code below:

onsizechange = (propname, event, index, value) => {     var newsize = this.state.selectedorder;      if (_.findwhere(newsize.breakdown, {size: propname}).quantity !== event.target.value) {       _.findwhere(newsize.breakdown, {size: propname}).quantity = event.target.value;       this.setstate({selectedorder: newsize})     }   } 

and code textfield

<textfield    type='number' floatinglabeltext='xs' min={0}    value={_.findwhere(this.state.selectedorder.breakdown, {size: 'xs'}).quantity}   onchange={this.onsizechange.bind(this, 'xs')}   fullwidth /> 

here's screenshot of error have. line 425 value line of textfield [1]

here's full code. error happens in function onaddorder

class orderform extends component {    constructor(props) {     super(props);     this.state = {       orders: [],       selectedorder: {         category: '',         product: '',         price: '',         color: '',         brand: '',         breakdown: [{           size: 'xs',           quantity: '0',         }, {           size: 's',           quantity: '0',         }]       },     };   }   onaddorder = () => {     var neworders = this.state.orders;     neworders.push({       breakdown: [{             size: 'xs',             quantity: _.findwhere(this.state.selectedorder.breakdown, {size: 'xs'}).quantity           }, {             size: 's',             quantity: _.findwhere(this.state.selectedorder.breakdown, {size: 's'}).quantity           }, {             size: 'm',             quantity: this.refs.sizem.getvalue(),           }, {              size: 'l',             quantity: this.refs.sizel.getvalue(),           }, {             size: 'xl',             quantity: this.refs.sizexl.getvalue(),           }, {             size: '2xl',             quantity: this.refs.size2xl.getvalue(),           }, {             size: '3xl',             quantity: this.refs.size3xl.getvalue(),           }       ]     });      this.setstate({        orders: neworders      });   }    render() {       return ( <div>                    <row>                       <col xs={1}>                         <textfield                          type='number' floatinglabeltext='xs' min={0}                          value={_.findwhere(this.state.selectedorder.breakdown, {size: 'xs'}).quantity}                         onchange={this.onsizechange.bind(this, 'xs')}                         fullwidth />                       </col>                       <col xs={1}>                         <textfield type='number' floatinglabeltext='s' min={0}                          value={_.findwhere(this.state.selectedorder.breakdown, {size: 's'}).quantity}                         onchange={this.onsizechange.bind(this, 's')}                         fullwidth />                       </col>                         <col xs={1}>                         <textfield type='number' floatinglabeltext='m' ref='sizem' min={0} fullwidth />                       </col>                       <col xs={1}>                         <textfield type='number' floatinglabeltext='l' ref='sizel' min={0} fullwidth />                       </col>                       <col xs={1}>                         <textfield type='number' floatinglabeltext='xl' ref='sizexl' min={0} fullwidth />                       </col>                       <col xs={1}>                         <textfield type='number' floatinglabeltext='2xl' ref='size2xl' min={0} fullwidth />                       </col>                       <col xs={1}>                         <textfield type='number' floatinglabeltext='3xl' ref='size3xl' min={0} fullwidth />                       </col>                   </row>                <flatbutton style={{width: '100%'}} label='add order' onclick={() => {this.onaddorder(); this.onreset(); }} />               <br />            </form>       </div>     );   }  }   export default withstyles(orderform, s); 

i think jquery not load correctly or added jquery library file mismatch reactjs. load current version jquery library file

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js 

Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -