Linter Errors Correction Feature

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.14.1"

src/App.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 import { useState } from 'react';
 import Player from './components/Player';
 import GameBoard from './components/GameBoard';

src/components/GameBoard.jsx

@@ -1,3 +1,6 @@
+/* eslint-disable react/no-array-index-key */
+import PropTypes from 'prop-types';
+
 const GameBoard = ({ onSelectSquare, board }) => (
   <ol id="game-board">
     {board.map((row, rowIndex) => (
@@ -6,6 +9,7 @@ const GameBoard = ({ onSelectSquare, board }) => (
           {row.map((playerSymbol, colIndex) => (
             <li key={colIndex}>
               <button
+                type="button"
                 onClick={() => onSelectSquare(rowIndex, colIndex)}
                 disabled={playerSymbol !== null}
               >
@@ -19,4 +23,11 @@ const GameBoard = ({ onSelectSquare, board }) => (
   </ol>
 );
 
+GameBoard.propTypes = {
+  onSelectSquare: PropTypes.func.isRequired,
+  board: PropTypes.arrayOf(
+    PropTypes.arrayOf(PropTypes.string),
+  ).isRequired,
+};
+
 export default GameBoard;

src/components/GameOver.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 const GameOver = ({ winner, onRestart }) => (
   <div id="game-over">
     <h2>Game Over!</h2>
@@ -8,9 +10,18 @@ const GameOver = ({ winner, onRestart }) => (
         won!
       </p>
     )}
-    {!winner && <p>It's a draw!</p>}
-    <p><button onClick={onRestart}>Rematch!</button></p>
+    {!winner && <p>It&apos;s a draw!</p>}
+    <p><button type="button" onClick={onRestart}>Rematch!</button></p>
   </div>
 );
 
+GameOver.propTypes = {
+  winner: PropTypes.string,
+  onRestart: PropTypes.func.isRequired,
+};
+
+GameOver.defaultProps = {
+  winner: null,
+};
+
 export default GameOver;

src/components/Log.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const Log = ({ turns }) => (
   <ol id="log">
@@ -15,4 +16,16 @@ const Log = ({ turns }) => (
   </ol>
 );
 
+Log.propTypes = {
+  turns: PropTypes.arrayOf(
+    PropTypes.shape({
+      player: PropTypes.string.isRequired,
+      square: PropTypes.shape({
+        row: PropTypes.number.isRequired,
+        col: PropTypes.number.isRequired,
+      }).isRequired,
+    }),
+  ).isRequired,
+};
+
 export default Log;

src/components/Player.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 
 const Player = ({
   initialName, symbol, isActive, onChangeName,
@@ -7,7 +8,8 @@ const Player = ({
   const [isEditing, setIsEditing] = useState(false);
 
   const handleEditClick = () => {
-    setIsEditing((editing) => !editing); // When update state based on old value you pass a function.
+    setIsEditing((editing) => !editing);
+    // When update state based on old value you pass a function.
     if (isEditing) {
       onChangeName(symbol, playerName);
     }
@@ -41,9 +43,16 @@ const Player = ({
         )}
         <span className="player-symbol">{symbol}</span>
       </span>
-      <button onClick={handleEditClick}>{isEditing ? 'Save' : 'Edit'}</button>
+      <button type="button" onClick={handleEditClick}>{isEditing ? 'Save' : 'Edit'}</button>
     </li>
   );
 };
 
+Player.propTypes = {
+  initialName: PropTypes.string.isRequired,
+  symbol: PropTypes.string.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  onChangeName: PropTypes.func.isRequired,
+};
+
 export default Player;

src/index.jsx

@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
-
-import App from './App.jsx';
+import App from './App';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(<App />);

src/winnig-combinations.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 export const WINNING_COMBINATIONS = [
   [
     { row: 0, column: 0 },

vite.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';