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.
