Why does an undefined variable error occur?

Question

JavaScript

Hi! I wanted to receive data to my React website via the API, I did everything as stated in the documentation, I installed npm install --save woocommerce-api, created an object with parameters as in the woocommerce.github.io/woocommerce-rest-api documentation -docs/?j...

import React, { Component } from 'react';
import '../App.css';
import WooCommerceAPI from 'woocommerce-api';


class Goods extends Component {
    WooCommerce = new WooCommerceAPI({
    url: 'http://portland.com/wp/', // Your store URL
    consumerKey: 'ck_c221d7f97defb2d3a045730b8a0ff470327180a6', // Your consumer key
    consumerSecret: 'cs_33cdde6ad3a4583624478504b86ee8fd7844b394', // Your consumer secret
    wpAPI: true, // Enable the WP REST API integration
    version: 'wc/v2' // WooCommerce WP REST API version
  });
    render() {
        return(
        <div className="GoodsMain">
            <div className="Goods">
            <img src="/images/photo.png" alt="appletv"/><br/>
            <div className="TextAlign">
            <span className="NameOfGood">{WooCommerce.get('products/1').name}</span><br/>
            <span className="StyleOfGood">black</span><br/>
            <span className="PriceOfGood">$49.99</span>
            </div>
            </div>

        </div>

        );
    }
}


export default Goods;

But I get Line 20: 'WooCommerce' is not defined no-undef . Can you show me how to use WooCommerce API in React correctly.

Answer 1

class Goods extends Component {
    WooCommerce = new WooCommerceAPI({
        url: 'http://portland.com/wp/', // Your store URL
        consumerKey: 'ck_c221d7f97defb2d3a045730b8a0ff470327180a6', // Your consumer key
        consumerSecret: 'cs_33cdde6ad3a4583624478504b86ee8fd7844b394', // Your consumer secret
        wpAPI: true, // Enable the WP REST API integration
        version: 'wc/v2' // WooCommerce WP REST API version
    });

    render() {
        return (
            <div className="GoodsMain">
                <div className="Goods">
                    <img src="/images/photo.png" alt="appletv"/>
                    <br/>
                    <div className="TextAlign">
                        <span className="NameOfGood">{this.WooCommerce.get('products/1').name}</span>
                        <br/>
                        <span className="StyleOfGood">black</span>
                        <br/>
                        <span className="PriceOfGood">$49.99</span>
                    </div>
                </div>
            </div>
        );
    }
}

or

const WooCommerce = new WooCommerceAPI({
    url: 'http://portland.com/wp/', // Your store URL
    consumerKey: 'ck_c221d7f97defb2d3a045730b8a0ff470327180a6', // Your consumer key
    consumerSecret: 'cs_33cdde6ad3a4583624478504b86ee8fd7844b394', // Your consumer secret
    wpAPI: true, // Enable the WP REST API integration
    version: 'wc/v2' // WooCommerce WP REST API version
});

class Goods extends Component {
    render() {
        return (
            <div className="GoodsMain">
                <div className="Goods">
                    <img src="/images/photo.png" alt="appletv"/>
                    <br/>
                    <div className="TextAlign">
                        <span className="NameOfGood">{WooCommerce.get('products/1').name}</span>
                        <br/>
                        <span className="StyleOfGood">black</span>
                        <br/>
                        <span className="PriceOfGood">$49.99</span>
                    </div>
                </div>
            </div>
        );
    }
}