UncaughtTypeError products.map 不是 function

Question

product.map is not a function, i've tried almost all the fix from the web still not working. also, i've tried to console.log(response.data) and it response success

react ver 7.0

constructor () {
        super()
        this.state = {
          products: []
        };
      }
  componentDidMount(){
         axios.get('http://localhost:8000/api/v1/products/1')
         .then(response => {
           this.setState({ products: response.data });
         })
         .catch(function (error) {
           console.log(error);
         })
       }
  render(){
   var { products } = this.state;
    var merk = products.map(products =>  {products.merk} );

got error products.map is not a function at var merk=.....

thanks.

console.log:

{success: true, data: Array(1), message: "Phone retrieved Successfully.."}
data: Array(1)
0: {id_product: 1, merk: "Xiaomi ", tipe: "Mi Note 10", soc_nama: "Qualcomm", soc_tipe: "Snapdragon 855+", …}
length: 1
__proto__: Array(0)
message: "Phone retrieved Successfully.."
success: true
__proto__: Object

Answer 1

products.map is not a function , this mean products is not an array

In your API at componentDidMount, You have to access to the data that you return from server. You accessing to response.data , this mean you just access to the data of XMLHttpRequest, not data of your API.

Try to console.log(response.data) , and see which one is the array data that you want to get from server