javascript - How to Map the data that I am getting from ajax React js? -
i new react js. how map through data getting json response ajax.i know did wrong place don't know where.this error getting
uncaught typeerror: this.state.data.map not function
code
/** * created arfo on 6/26/2016. */ var react =require('react'); var api = require('../utils'); var bulkmail = react.createclass({ getinitialstate:function () { return{ default:10, data:'', color:'#58fa58' } }, componentdidmount:function () { api.getemail(this.state.default).then(function (response) { this.setstate({ data:response }) }.bind(this)) }, onsubmit:function (e) { e.preventdefault(); console.log(this.refs.text.value.trim()); }, onchange:function (e) { e.preventdefault(); //console.log(this.refs.text.value.trim()) var data = this.refs.text.value.trim(); if(isnan(data)){ this.setstate({ color:'#fe2e2e' }) }else{ this.setstate({ color:'#58fa58' }) } }, render:function () { console.log(this.state.data); var results = this.state.data; return( <div classname="bodybox"> <div classname="box"> <div classname="upc"> <p>generate bulk email</p> <form onsubmit={this.onsubmit}> <input onchange={this.onchange} type="text" style={{border:'1px solid '+this.state.color}} ref="text" defaultvalue={this.state.default} placeholder="enter number"/> <button>get data</button> </form> <div classname="result"> <ul> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ {this.state.data.map(function (data) { return <li>data.email</li> })} ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ </ul> </div> </div> <div classname="tdown"> <p>json format</p> <textarea defaultvalue={"json"} /> </div> </div> </div> ) } }); module.exports = bulkmail ;
set data:[ ] in
getinitialstate:function () { return{ default:10, data:[], color:'#58fa58' } }, and check
componentdidmount:function () { api.getemail(this.state.default).then(function (response) { console.log('check',response) // <---------------- this.setstate({ data:response }) }.bind(this)) },
Comments
Post a Comment