show a feature through exporting in a react component

Question

show a feature through exporting in a react component

I'm currently learning React by tackling a problem in React. Below is the React code challenge I'm working on. However, I encountered an error in the browser that I couldn't resolve even after searching on Google. I've included my code below along with a link to StackBlitz. Can someone please assist me?

Property 'stateDropdown' does not exist on type 'JSX.IntrinsicElements'.(2339)

https://stackblitz.com/edit/stackblitz-starters-ngl4yu?description=React%20%20%20TypeScript%20starter%20project&file=src%2Fcomponents%2FstateDropdown.tsx,src%2Fcomponents%2FstateDropdown.css,src%2FApp.tsx&title=React%20Starter

import { FC } from 'react';

import './style.css';
import { stateDropdown } from './components/stateDropdown';

export const App: FC<{ name: string }> = ({ name }) => {
  return (
    <div>
      <stateDropdown />
      <h1>Hello {name}!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
};

Coding challenge https://www.youtube.com/watch?v=V2zEAXLQbF4&t=794s

javascript html css reactjs react-hooks

Answer 1

Answer №1

When creating user-defined JSX components (like StateDropdown), it is recommended to use PascalCase instead of camelCase. This helps JSX distinguish between custom components and HTML elements (e.g. <div>, <h1>, <p>, etc.).

import { FC } from 'react';

import './style.css';
import { StateDropdown } from './components/StateDropdown';

export const App: FC<{ name: string }> = ({ name }) => {
  return (
    <div>
      <StateDropdown />
      <h1>Hello {name}!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
};

Answer 2

When creating user-defined JSX components (like StateDropdown), it is recommended to use PascalCase instead of camelCase. This helps JSX distinguish between custom components and HTML elements (e.g. <div>, <h1>, <p>, etc.).

import { FC } from 'react';

import './style.css';
import { StateDropdown } from './components/StateDropdown';

export const App: FC<{ name: string }> = ({ name }) => {
  return (
    <div>
      <StateDropdown />
      <h1>Hello {name}!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
};

show a feature through exporting in a react component

Answer №1

Similar questions

The React JSS element selector allows you to target the current element using `&element`

Is Jquery compatible with your Wordpress theme?

What could be causing the Navbar Icon to not show up on my website?

Issue with Material UI: Background elements inaccessible while MUI Dialog is active

Angular JS promise not fulfilling its return obligation

Discovering visible ID numbers on the screen

What is causing the image to move to the following line?

Utilizing the Jquery hover feature to reveal or conceal an element

Troubleshooting problems with AJAX in WordPress

Is anyone else seeing a mysterious gray outline surrounding the image?

Issue with prolonged CSS transition duration affecting width and position changes

The issue occurs when using z-index: -1 in Google Chrome causes links to malfunction

Toggle the input box by clicking the button

What steps should I take to execute JavaScript within the WebBrowser control?

Leveraging Vue Data for Storing CSS Properties

The remove button in the cart is malfunctioning when attempting to delete a product. I have implemented ajax for this feature, but it

Cannot load the next page using jQuery ajax

css allow inline-block elements to fill the entire width of their container

Showing a temporary marker while utilizing jQuery UI sortable container

VueDraggable communicates with the database by sending a request during drag and drop interactions