Home » Javascript » Type Error this.state.formData.map is not a function (Reactjs)

Type Error this.state.formData.map is not a function (Reactjs)

Posted by: admin November 1, 2017 Leave a comment

Questions:

I am creating a website in react and am trying to get my database data to display on the webpage to show all of the restaurants for the area that the user selected. I have not been able to figure this out.

Here is my code:

JavaScript

constructor() {
    super()
    this.state = {
        first_name: '',
        restaurant_name: '',
        restaurant_address: '',
        rating: '',
        city_id: [],
        form: [],
        category_id: [],
        formData: []
    }
}

componentDidMount() {
    axios.get('/api/form').then(response => {
        console.log(response.data);
        this.setState({
            formData: response.data
        })
    })
}


    .then(function (response) {
        console.log(response)
      })
      .catch(function (error) {
        console.log(error)
      }) 
}



      render() {
          console.log(this.state.formData);{
           let formData = this.state.formData.map(function(data) {
              return(
                  <div>
                      <div>
                      {data.restaurant_name}
                      </div>
                </div>
                ) 

          })
        }

I took out the parts the I don’t think are relevant.

Answers: