Use a semantic tag instead of a div in an example for 5. What is the difference between Element and Component?

[dolgachio]

Desccription

If you open 5. What is the difference between Element and Component?
the example code is:

const Button = ({ handleLogin }) => (
  <div id={"login-btn"} onClick={handleLogin}>
    Login
  </div>
);

However, the div element is not the best choice for a button. So, I would suggest replacing it with a button element.

I would be glad to create a pull request if you don't mind 😃 @sudheerj

[anup4747]

A React element is an object that describes a DOM node (or another component) and its properties. It’s what React uses to build the user interface. When you use JSX syntax, like
<div id="login-btn">Login</div>
it’s converted into a React element. The element itself is a lightweight, immutable description of what to render.

A React component is a function or class that can accept inputs (called "props") and returns a React element. Components are the building blocks of a React application, and they can manage state, lifecycle methods, and more. For instance, the Button function you shared is a component. It takes handleLogin as a prop and renders a div element (or a button element, as you suggested).

[dolgachio]

@anup4747 you are right, but from the HTML semantic standpoint <div> tag should not be a button.
in this example, an element has login-btn id and onClick handler.

Here you can find more details on why it is not a good idea:
https://theadminbar.com/accessibility-weekly/divs-are-not-buttons/