Why does the TypeError: scriptData is undefined error pop up?

Question

React

Hello! I'm learning React and can't figure out why I'm getting this error: TypeError: scriptData is undefined; can't access its "map" property. Here is the code

spoiler

import React, {Component} from "react";

export default class Scripts extends Component {
  render() {
    console.log(this.props);
    let { scriptData } = this.props;

    const scriptTemplate = scriptData.map(item => {
      return (
        <tr key={item.id}>
          <th scope="row">{item.id}</th>
          <td>{item.name}</td>
        </tr>
      );
    });

    return (
      <div className="container">
        <h1 className="m-5">Скрипты</h1>

        <table className="table table-hover">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Название</th>
              <th scope="col">Действия</th>
            </tr>
          </thead>
          <tbody>{scriptTemplate}</tbody>
        </table>
      </div>
    );
  }
}

spoiler

import React, { Component } from "react";
import "./App.css";
import Navbar from "./component/Navbar/Navbar";
import Scripts from "./component/Scripts/Scripts"

const scriptArray = [
  {
    id: 1,
    name: `Первый скрипт`
  },
  {
    id: 2,
    name: `Второй скрипт`
  },
  {
    id: 3,
    name: `Третий скрипт`
  },
  {
    id: 4,
    name: `Четвертый скрипт`
  }
];



class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Navbar />
        <Scripts scriptData={scriptArray} />
      </React.Fragment>
    );
  }
}

export default App;

Next, the App component is rendered in index.js

Answer 1

Everything is fine with the code. Either the error is elsewhere, or you are building a different version of the code.