How to Map the data that I am getting from ajax React js?

Question

I am new to react js. How to map through the data I am getting json response from ajax.I know i did wrong some place But i don't know where.This the error I am getting

Uncaught TypeError: this.state.data.map is not a function

This is My code

/**
 * Created by 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 ;

Kokovin Vladislav · Accepted Answer · 2016-06-28 11:20:41Z

3

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))
},

answered Jun 28, 2016 at 11:20

Kokovin Vladislav

10.4k5 gold badges41 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Piyush.kapoor · Accepted Answer · 2016-06-28 11:24:51Z

1

Add 

getInitialState: function() {
     return{
      default:10,
      data:[],
      color:'#58FA58'

  }
}

answered Jun 28, 2016 at 11:24

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2016-06-28 11:29:10Z

1

Your state data is not defined as an array. Correct it as:

getInitialState:function () {

  return{
      default:10,
      data: [],
      color:'#58FA58'

  }
}

edited Jun 28, 2016 at 11:29

answered Jun 28, 2016 at 11:22

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Collectives™ on Stack Overflow

How to Map the data that I am getting from ajax React js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related