What exactly is the significance of the error message "The JSX element type 'Header' does not have any construct or call signatures"?

I am encountering an error in my code, specifically with the Header and List elements. The error message keeps stating that the JSX element type Header does not have any construct... What could be causing this issue?

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import { Header, List } from 'semantic-ui-react';


function App() {
  const [admin, setAdmin] = useState([]);


  useEffect(() => {
    axios.get('http://localhost:5000/api/admin').then(response => {
      console.log(response);
      setAdmin(response.data);
    })
  }, [])

  return (
    <div>
      <Header as='h2' icon='users' content='Reactivities'/>     
          <List>
          {admin.map((AppUser: any) => (
            <List.Item key={AppUser.id}>
              {AppUser.city}
            </List.Item>
          ))}
          </List>
          </div>
  );  
}

export default App;

Answer №1

After wrestling with the same issue for an extended period, I finally discovered the root cause - a version incompatibility. The problem was resolved by using the following version combination:

"react": "^17.0.2",
"react-dom": "^17.0.2",
"semantic-ui-react": "^2.1.2"
"@types/react": "^17.0.3",
"@types/react-dom": "~17.0.3"

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

analyzing strings by comparing their characters to another string

In a scenario where I have two strings; let's call them string a="a-b-c" and string b="a-b". I am looking to determine whether every letter in string b is present within string a. ...

Energetic flair for Vue animations

I am currently developing a VueJS sidebar component. The objective is to allow the parent to define a width and display a toggle button that smoothly slides the sidebar in and out. Here is an example: <template> <div class="sidebarContainer ...

Retrieving selected values from a dynamic Primeng checkbox component

Within my Angular app, I am managing an array of questions. Each question includes a text field and an array of string options to choose from. The questions are retrieved dynamically from a service and can be updated over time. To allow users to select mul ...

Facing issues with the forEach method in ReactJs when attempting to access data from an array

Struggling with a ReactJS issue, I've come across a problem with the HomePage Component where the forEach method isn't working as expected. I'm attempting to retrieve data from a defined array. Take a look at the code snippet below: import R ...

JavaScript's Blob to Base64 conversion using FileReader is failing to produce any output

In my typescript application, I am utilizing the FileReader to convert a blob into a base64 image for display within the template. adaptResultToBase64(res: Blob): string { let imageToDisplay : string | ArrayBuffer | null = ''; const re ...

How can the value be accessed when using getElementById in Angular for <mat-select> elements that do not have a value attribute?

Within a loop, I have an element that has a dynamically generated id: <mat-select multiple class="dw-input" [value]="element.txn_type_id ? element.txn_type_id.split(',') : []" id="field-{{element.Name}}-txn_type_id&quo ...

JavaScript - Sending Form Data with Local Time

I want to automatically submit a form at a specific time of day The form should be submitted every day at "15:30:00" Here is the JavaScript code I have written: <script type="text/javascript> function initClock() { var now = new Date(); var h ...

Avoid constantly destroying the Bootstrap Popover

I am facing a challenge with retrieving data from two checkbox inputs inside a popover. The issue arises because the popover appears in the DOM when I click a button, but is removed when I click it again. It seems that the problem lies in the fact that Jav ...

Attempting to generate a jwt results in an undefined value

Currently in the process of mastering Node.js and I am in the midst of transitioning my existing API from Python to Node. My main challenge lies in the creation of a jwt token for authentication purposes with a third-party API. However, it seems I'm e ...

How can I dynamically update the content of the right side of the side navbar by clicking on navbar links?

I have a side-navigation bar with content on the right side. How can I display specific content on the right side when clicking on a navigation link? For example, only show the name when clicking on the name link and only show the password field when click ...

Issue with JavaScript variables (I presume) - there seems to be a conflict when one variable is used alongside another

I am attempting to conduct a test that requires displaying the number of attempts (each time the button is pressed) alongside the percentage of successful attempts, updating each time the button is clicked. However, I've encountered an issue where onl ...

What is the most effective method for incorporating access token authentication in a React application?

As a newcomer to React, I am working on implementing authentication using Express.js in my react web application. I have successfully set the token in response cookies on the backend with the HttpOnly flag, but unfortunately, I am unable to read it on the ...

Is there a proper way to supply createContext with a default value object that includes functions?

As I was creating my context, I set an initial state and passed the necessary functions for useContext. Although this method is functional, I'm concerned it may present challenges in larger projects. Does anyone have suggestions for a more efficient a ...

Adjusting iframe height based on its source URL using JQuery

Currently, I have implemented a script to adjust the height of YouTube iframes in order to maintain a 16:9 aspect ratio while keeping the width at 100% of the container. The challenge I am facing is ensuring that the script only affects YouTube videos and ...

Learn the process of obtaining a location and showcasing it on Google Maps

I am working on creating a program that utilizes modernizer to ask for the user's location and then displays it using Google Maps. So far, I have been able to use geolocation to determine the coordinates of the user's location and attempted to in ...

Pause file uploads, display modal popup, then resume uploading

Is there a way to pause file uploading in order to display file requirements before proceeding? For example, when a user clicks on "upload file", I would like to show them a modal window with details about the file they need to upload. Once they click ok, ...

The usage of alert() is not allowed within a jQuery function

Currently, I am experimenting with jQuery for making AJAX calls. For now, I am trying to display the response text in a popup box using the alert() method. $(document).ready(function() { $(".jeobutton").mouseup(function() { var $button = $(thi ...

Achieve the same functionality as the nextjs getStaticProps() function across all pages without the need to duplicate the code on each page

Is there a way to implement the functionality of the nextjs getStaticProps() function for all pages without duplicating the code on each page? I have multiple pages and a layout component. I am looking to include a global function on all pages. Is it poss ...

Background image fixed with scrolling effect

I've been struggling with a parallax effect on my website. After seeing it work smoothly on other websites, I tried to implement it myself but couldn't quite get it right. The background image keeps moving when I scroll the page and I want it to ...

Executing the process of launching an entity and then promptly erasing it from the screen

I'm really stuck on my code and could use some help. I have a ship that is shooting and aliens moving towards it. I want the bullets to hit the aliens, remove them from the canvas, and keep doing so until all the aliens are gone. I've been thinki ...