Problem with rendering a React component in another component for SPFX

Question

This is my first post here, I guess :)

I am writing because I have a task to make a Shopping app which should be made in SharePoint Framework and use React as a framework.

My current problem is that, I have two components, one in a file called ShoppingWebpart.tsx (which should render other components) and an inner component in the file Cart.tsx which I want to render in ShoppingWebpart.tsx.

The problem is I get an error in ShoppingWebpart.tsx when trying to render the content in Cart.tsx. The error is:

Here I will attach the code:

Cart.tsx:

import * as React from 'react';
import styles from './ShoppingWebpart.module.scss';
import { IShoppingWebpartProps, ISPList, ISPLists } from './IShoppingWebpartProps';
import { escape } from '@microsoft/sp-lodash-subset';

export interface IShoppingWebpartState{
  items: ISPLists[];
}

export default class Cart extends React.Component<IShoppingWebpartProps, any> {
  constructor(props: IShoppingWebpartProps){
    super(props);

    this.state = {
      items: this.props.list
    }
  }

  public render(): React.ReactElement<IShoppingWebpartProps> {
    console.log("Render: ", this.state.items);
    let products = [];

    return (
      <div className={ styles.shoppingWebpart }>
        <div className={ styles.container }>

          <div className={ styles.row }>
            <div className={ styles.column }>
              <span>Cart details should go here</span>
            </div>
          </div>

        </div>
      </div>
    );
  }
}

module.exports = Cart;

ShoppingWebpart.tsx:

import * as React from 'react';
import styles from './ShoppingWebpart.module.scss';
import { IShoppingWebpartProps, ISPList, ISPLists } from './IShoppingWebpartProps';
import { escape } from '@microsoft/sp-lodash-subset';
var Cart = require('./Cart.tsx');

export interface IShoppingWebpartState{
  items: ISPLists[];
}

export default class ShoppingWebpart extends React.Component<IShoppingWebpartProps, any> {
  constructor(props: IShoppingWebpartProps){
    super(props);

    this.state = {
      items: this.props.list
    }
  }

  public render(): React.ReactElement<IShoppingWebpartProps> {
    console.log("Render: ", this.state.items);
    let products = [];

    for(let i = 0; i < this.state.items.length; i++){
      products.push(<div key={this.state.items[i].Id} className={styles.productItem}>
        {this.state.items[i].Product} <br/>
        {this.state.items[i].Category} <br/>
        {this.state.items[i].ProductDescription} <br/>
        {this.state.items[i].Price}<br/>
        <button>Add to Cart</button>
      </div>)
    }

    return (
      <div className={ styles.shoppingWebpart }>
        <div className={ styles.container }>

          <div className={ styles.row }>
            <span className={ styles.title }>Welcome to Kevins webshop</span>
            <p className={ styles.subTitle }>Produkter till enastående priser.</p>

            <Cart></Cart>

            <div className={ styles.productItem }>
              {products}
            </div> 
          </div>

        </div>
      </div>
    );
  }
}

Here is the file structure:

All help is appreciated.

Answer 1

In your code, you are mixing up the Node "require" with a module export and a default export for the class "Cart".

You should try the following:

• Remove the module export from Cart.tsx (last line)
• Replace var Cart = require('./Cart.tsx'); in ShoppingWebPart.tsx with import Cart from './Cart';

• Provide the required props to the Cart element in the render function of ShoppingWebPart.tsx

  <Cart items={ this.state.items } />