states, events and props

Author: nishant2106

src/App.css

@@ -0,0 +1,20 @@
+import React from "react";
+
+const EventComponent: React.FC = () => {
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    console.log(event);
+  };
+  const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    console.log(event.screenY);
+  };
+  return (
+    <div>
+      <input onChange={onChange} />
+      <div draggable onDragStart={onDragStart}>
+        Drag Me
+      </div>
+    </div>
+  );
+};
+
+export default EventComponent;

src/App.test.tsx

@@ -1,19 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import ReactDom from "react-dom";
+import EventComponent from "./events/EventComponent";
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+const App = () => {
+  return (
+    <div>
+      <EventComponent />
+    </div>
+  );
+};
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+ReactDom.render(<App />, document.querySelector("#root"));

src/App.tsx

@@ -0,0 +1,27 @@
+interface ChildProps {
+  color: string;
+  onClick: () => void;
+  children?: React.ReactNode;
+}
+
+export const Child = ({ color, onClick }: ChildProps) => {
+  return (
+    <div>
+      {color} <button onClick={onClick}>Click Me</button>
+    </div>
+  );
+};
+
+export const ChildAsFC: React.FC<ChildProps> = ({
+  color,
+  onClick,
+  children,
+}) => {
+  return (
+    <div>
+      {color}
+      {children}
+      {color} <button onClick={onClick}>Click Me</button>
+    </div>
+  );
+};

src/events/EventComponent.tsx

@@ -0,0 +1,10 @@
+import { ChildAsFC } from "./Child";
+
+const Parent = () => {
+  return (
+    <ChildAsFC color="red" onClick={() => console.log("clicked")}>
+      sfds
+    </ChildAsFC>
+  );
+};
+export default Parent;

src/index.css

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />