I could not find an answer on other posts so I am starting my own.
I am passing a ‘socket’ instance as prop to my Home and ChatPage components but I am not sure what type to give to it.
I went to the socket.io documentation but nothing has helped me so far.
App.tsx:
import { BrowserRouter, Routes, Route } from "react-router-dom";
import * as io from "socket.io-client";
import "./App.css";
import ChatPage from "./pages/ChatPage";
import Home from "./pages/Home";
const socket = io.connect("http://localhost:4000");
function App() {
return (
<BrowserRouter>
<div>
<Routes>
<Route path="/" element={<Home socket={socket} />}></Route>
<Route path="/chat" element={<ChatPage socket={socket} />}></Route>
</Routes>
</div>
</BrowserRouter>
);
}
export default App;Home.tsx
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
type Socket = {
socket: any
}
const Home: React.FC<Socket> = ({ socket }) => {
const navigate = useNavigate();
const [userName, setUserName] = useState("");
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
localStorage.setItem("userName", userName);
navigate("/chat");
};
return (
<form className="home__container" onSubmit={handleSubmit}>
<h2 className="home__header">Sign in to Open Chat</h2>
<label htmlFor="username">Username</label>
<input
type="text"
minLength={6}
name="username"
id="username"
className="username__input"
value={userName}
onChange={(e) => setUserName(e.target.value)}
/>
<button className="home__cta">SIGN IN</button>
</form>
);
};
export default Home;What can I pass instead of ‘any’ in my Socket type?
I am open to suggestions at this point. Thanks.
>Solution :
The variable socket will be of type Socket. you can import it as follows
import { Socket } from 'socket.io-client';