I'm getting an error message "undefined has no properties" but don't understand where the problem occurs

Question

I'm new to React JS and now creating a react app that let a person enter a product, then the app lists the product on the screen, but i'm getting an error message that i do not understand where the problem occurs. But i'm gettin an error "TypeError: undefined has no properties" in this line of code:

const ProduktLista = () => {
     return (
         <ul>
            {this.state.produkter.map (produkt => (
                <li key={this.state.produkt}>{this.state.produkt + ' - ' + this.state.antal + ' - ' + this.state.pris}</li>
             ))}

Could anyone explain. Here is my code:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';


export default class Kvitton extends React.Component {
constructor (props) {
    super(props);
    this.state = { 
        produkter: [], 
        produkt: '',
        antal:"",
        pris: "",
        summa:""
        
      
    }
    this.eFormChange = this.eFormChange.bind(this);
    //this.eSumma = this.eSumma.bind(this);
    this.eSubmit  = this.eSubmit.bind(this);       
    console.log('constructor'); 
}

render() {
    console.log('Render'); 
    return (
        <div>
            <h3>Kvitto</h3>
           
            <form onSubmit={this.eSubmit} >
                <p>
                    <label htmlFor="produkt">Produkt: </label>
                    <input id="produkt" onChange={this.eFormChange} value={this.state.produkt} />

                </p>
                <p>
                    <label htmlFor="antal">Antal: </label>
                    <input id="antal" onChange={this.eFormChange} value={this.state.antal} />

                </p>
                <p>
                    <label htmlFor="pris">Pris: </label>
                    <input id="pris" name="pris" onChange={this.eFormChange} value={this.state.pris} />
                </p>
                <p>
                    <button className="btn btn-secondary btn-sm">Submit </button>
                </p>
                <p> <ProduktLista valutaItems={this.state.produkter} /> </p>
                <p>
                      <label htmlFor="produkt">Summa: </label> 
                      <span>   </span>
                </p>

                
                
            </form>
        </div>
    );
}

eFormChange (e) {
    var inputObj = {};
    inputObj[e.target.id] = e.target.value;                 
    this.setState( inputObj );
}

eSubmit(e) {
    e.preventDefault();
    alert('submit');
    if (this.state.produkt.length === 0 ) {
        return alert("You have not given a product");
    }
    if (this.state.antal.length === 0 || this.state.antal !==Number)  {
        return alert("Antal has to be a number");
    }
    e.preventDefault();
    if (this.state.pris.length === 0 || this.state.pris !==Number) {
        return alert("Price has to be a number");
    }
    const newProduct = { 
        produkt: this.state.produkt,
        antal: this.state.antal, 
        pris: this.state.pris,
        //summa: (this.state.antal) *  (this.state.pris)

    };
  
    this.setState(state => ({
      produkter: state.produkter.concat(newProduct),
      produkt: '',
      antal:'',
      pris: ''
      //summa:''
    }));

    /* eSumma (e) {
        let summa = e.antal * e.pris;
        return summa;
    }*/

    console.log("----------" + this.state.produkt);
}
} 

const ProduktLista = () => {
    return (
        <ul>
            {this.state.produkter.map (produkt => (
                <li key={this.state.produkt}>{this.state.produkt + ' - ' + this.state.antal + ' - ' + this.state.pris}</li>
            ))}
        </ul>
    );
}

Answer 1

Issue

ProduktLista is a functional component, they are instanceless and so there is no defined this.

Solution

It appears you meant to render the passed valutaItems={this.state.produkter} prop.

const ProduktLista = ({ valutaItems }) => {
  return (
    <ul>
      {valutaItems.map(({ antal, pris, produkt }) => (
        <li key={produkt}>
          {produkt + ' - ' + antal + ' - ' + pris}
        </li>
      ))}
    </ul>
  );
}