Objects are not valid as a React child error

Question

this is my response of my server:

enter image description here

but when I want to set it on my states I got this error message:

Objects are not valid as a React child (found: object with keys {id, eyecolor1}). If you meant to render a collection of children, use an array instead.
    in span (at Main.js:328)
    in div (at Main.js:327)
    in SingleDialog (at Main.js:264)
    in div (at Main.js:180)
    in Main (at Register.js:11)
    in div (at Register.js:9)
    in Register (created by Route)
    in Route (at App.js:23)

---

my codes:

constructor(props){
    super(props);
    this.state = {
      date : {
        day : {
          1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12, 13: 13, 14: 14, 15: 15, 16: 16, 17: 17, 18: 18, 19: 19, 20: 20, 21: 21, 22: 22, 23: 23, 24: 24, 25: 25, 26: 26, 27: 27, 28: 28, 29: 29, 30: 30, 31: 31
        }
      },
      data:{

      }
    }

  componentWillMount(){
      this.getInitInfo();
  }


  getInitInfo(){

    userService.getInitInfo('WebApp','1','')
      .then(
        (response) => {
          console.log(response.data); //the output

          this.setState({data:response.data}) //error line


        }
      )
  }

my error line:

this.setState({data:response.data})

what is my wrong?

Answer 1

The format of state object is wrong and you need to check the response if it is null or not.

Change you code from this.setState({data: response.data})

to this.setState({data: response && response.data})