Error: ReservationCard has not been defined

Can someone help me understand how to access values from the template reducer using 'connect'?

I encountered the following error message:

Uncaught ReferenceError: ReservationCard is not defined

You can view the complete code in this jsfiddle link.

Below is a snippet from the code:

export default React.createClass({
  propTypes: {
       value: React.PropTypes.object.isRequired,
       profile: React.PropTypes.object.isRequired,
       SPORTSDetails: React.PropTypes.shape({
           error: React.PropTypes.object,
           SPORTSId: React.PropTypes.number,
           SPORTSName: React.PropTypes.string,
           SPORTSAmount: React.PropTypes.number,
           SPORTSDate: React.PropTypes.string,
           isRetrieving: React.PropTypes.boolean
       }),
       onEdit: React.PropTypes.func.isRequired
   },

   displayName: 'ReservationCard',
})

export default connect(state => ({
    profile: state.template.profile,
}), null, null, {
    withRef: true // allows parent to access component functions
})(ReservationCard);

Answer №1

Export default is specifically designed to work with a single property. This means that you can export one main value from a file, while everything else needs to be named.

In order for your component to function correctly, it must be both defined and used in the appropriate manner. Currently, the displayName attribute is not yet associated with a component, whereas the exported React.createClass is.

This allows you to define your component in one location and utilize it using the connect function.

let ReservationCard =  React.createClass({
    propTypes: {
         value: React.PropTypes.object.isRequired,
         profile: React.PropTypes.object.isRequired,
         SPORTSDetails: React.PropTypes.shape({
             error: React.PropTypes.object,
             SPORTSId: React.PropTypes.number,
             SPORTSName: React.PropTypes.string,
             SPORTSAmount: React.PropTypes.number,
             SPORTSDate: React.PropTypes.string,
             isRetrieving: React.PropTypes.boolean
         }),
         onEdit: React.PropTypes.func.isRequired
     },

     displayName: 'ReservationCard',
  })

  export default connect(state => ({
      profile: state.template.profile,

  }), null, null, {
      withRef: true // allows parent to access component functions
  })(ReservationCard);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal dropdown options when there is no text entered

To achieve the functionality of hiding dropdown values when there is no text in the search bar, you can use the following code snippet. The code provided below works perfectly for single selection. However, if you allow multiple value selections, it automa ...

Padding needed for floated <li> items in horizontal menu

I'm attempting to design a horizontal top header featuring a main navigation stacked above a sub-navigation. Both navigations are constructed using <ul> elements with floated <li> items. The sub-navigation mysteriously has excess horizonta ...

Set the side columns in CSS to have a fixed width, while the center content column should have

Check out this fiddle I created for everyone to view: http://jsfiddle.net/defaye/DhaHP/4/ For the full-screen result, click here: http://jsfiddle.net/defaye/DhaHP/4/embedded/result/ I'm encountering an issue where, after resizing the window past a ce ...

The lengthy string is not breaking into separate lines as expected in Internet Explorer

My querystring is quite long http://terra.cic.local/web/index.cfm//pm/uebersicht?sucheAufgeklappt=was%2Cwie%2Cwohin%2Cwann%2Cwer&sucheVon=&sucheBis=&sucheIstErsteSeiteAnzahlProdukteErmitteln=false&sucheIDReiseart=26&sucheHotelart=1081& ...

Learn how to update a form dynamically using the Ajax.BeginForm feature

I am currently working on updating a form within my application using Ajax.BeginForm. The update process is functioning correctly, however, upon executing the function in the controller, it redirects to a view with the controller function name displayed. ...

Accessing store in Vue, the getter function returns a value representing whether the user is currently logged

I have the user state stored in my Vue store, but when I try to access it like this: let isLoggedIn = store.getters.isLoggedIn Instead of getting a simple true or false, I see this in the console: ƒ isLoggedIn (state) { return state.user ? true : false ...

Retrieving the dynamically selected table row ID using Javascript

Within my application, I am dynamically adding new rows with unique IDs assigned from a loop. When creating a Purchase Order in the view, I am adding these rows to a table. Now, when the value of Select changes, I need to capture the changed row ID and t ...

Ensure that the tooltip remains visible within the confines of the page

In my Angular application, I have successfully implemented a versatile tooltip feature that goes beyond just displaying text. The tooltip is a div element that has the ability to contain various contents: .tooltip-master { position: relative; .tooltip ...

Practicing the basics of a simple 3-column layout before delving into the world of

Currently, I am working on a three column layout that appears to be functioning well on the surface. However, upon inspecting the page using developer tools, it becomes apparent that the margin of the third middle column is overlapping with the neighboring ...

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

Receive alerts for excessive memory consumption in Node.js

I currently have a Node.js application running on Ubuntu 14 through Amazon EC2. My goal is to receive an email notification once the memory usage surpasses a specific threshold. While I am aware that PM2 offers an API feature that allows for app restarts ...

Setting the height to 100% will not maintain the aspect ratio of the image

Having trouble with Blogger once again as I try to style the homepage. I am aiming to feature snippets and titles in tiles with a fixed height of 200px but a dynamic width for responsive design. My goal is to display the first image and a "read more" butt ...

Issue with IE11 when using Bootstrap 4 and Flexbox

In my design, I have two columns that need to have equal heights when displayed next to each other on a large screen. However, on mobile devices, they should stack on top of each other. I am currently using the old BS grid for this layout. The content wit ...

What method can be employed to eliminate choice selection lacking any value?

Currently, I am encountering difficulties in my attempt to remove or hide the first option value from a ransack code. Would you be able to assist me in addressing this concern? Here is the HTML CODE that I am working with: <select id="q_c_0_a_0_name" ...

Save JSON Tree data in the Database

Given a tree structure JSON, I am tasked with creating an API to insert all the data into a database at once. The organization entities can have multiple parents and children relationships. An example of the JSON data: { "org_name": "orga ...

Error encountered during deployment of React app in npm development build

Currently, I am working on a React application. I encountered an issue when attempting to deploy it with npm start. The error message states that the development build is not optimized. I have been advised to use npm run build to install the production b ...

HTML tag data search using Regex

I received an HTTP request and I'm attempting to extract specific data from it using a regular expression. For instance, in this particular part of the HTML: <tr><th>Continent:</th><td class='trc'>Europe (EU)</td& ...

Encountering issues with an Express Server when sending multiple AngularJS Post requests. Server crashes when attempting a second post request

Since running two post requests simultaneously is not feasible on my client, I attempted to execute the second post within the .then section of the first post. This method has been successful in my previous projects. However, I encountered an issue where m ...

Utilizing React hooks to dynamically toggle a class within a component

While similar questions have been raised previously, none seem to address my specific issue. Most references involve class components that do not align exactly with what I am attempting to achieve. My goal is to toggle two components on and off with a simp ...

Arranging elements with z-index does not necessarily bring dropdown HTML content to the front

Can someone help me with creating a dropdown menu that expands on top? I have tried using the z-index property, but for some reason it seems to blend in with the rest of the site. The issue occurs when entering "Enter your region" on my website 33hotels.co ...