User Information Submission and Deletion System Using React Router

      
        import { BrowserRouter, Routes, Route} from "react-router-dom";
        import Navbar from "./Navbar"; // Import the Navbar
        import { useState } from "react";
                            
        function Home() {
            return <h1>Home Page</h1>
        }
        
        function Info({ posts, setPosts }) {
        
            //Remove the selected post
            function handleDelete(indexToDelete) {
                setPosts(posts.filter((_, index) => index !== indexToDelete)); 
            }
        
            return (
            <div style={{ textAlign: "center", marginTop: "20px" }}>
                  <h1>User Information</h1>
        
                  {posts.length === 0 ? ( <p>No submission yet!</p>) : (
                    <ul style={{ listStyle: "none"}}>
                      {posts.map((post, index) => (
                        <li key={index} style={{ margin: "15px" }}>
                          <h3>{post.name}</h3>
                          <p>Email: {post.email}</p>
                          <p>Posted on: {post.time}</p>
                          {/* Delete Button at Bottom Right */}
                          <button onClick={() => handleDelete(index)}>
                            Delete
                          </button>
                        </li>)
                      )}
                    </ul> )}
            </div>);
        }
        
        function Submit({ setPosts }) {
        
            const [name, setName] = useState(""); // Stores name input
            const [email, setEmail] = useState(""); // Stores email input
            
            function handleSubmit(event) {
        
              event.preventDefault(); // Prevents page reload
              alert(`Name: ${name}\nEmail: ${email}`);
              
              //Creates an object called newPost
              const newPost = { name, email, time: new Date().toLocaleString() }; 
              setPosts((prevPosts) => prevPosts.concat(newPost));
              
            }
        
            return (
              <div style={{ textAlign: "center", marginTop: "20px" }}>
                  <h2>Simple Form</h2>
                  <form onSubmit={handleSubmit}>
                    <input 
                      type="text" 
                      value={name} 
                      onChange={(event) => setName(event.target.value)} 
                      placeholder="Enter your name"
                      style={{ margin: "10px auto", padding: "8px" }}/>
                      <br />
                    <input 
                      type="email" 
                      value={email} 
                      onChange={(event) => setEmail(event.target.value)} 
                      placeholder="Enter your email"
                      style={{ margin: "10px auto", padding: "8px" }}/>
                    <br />
                    <button type="submit">Submit</button>
                  </form>
              </div>);
        }
                   
        function App() {
        
          const [posts, setPosts] = useState([]); 
        
          return (
            <BrowserRouter>
              <Navbar /> {/* Add Navbar at the top */}
              <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/info" element={<Info posts={posts} setPosts={setPosts}/>} />
                <Route path="/submit" element={<Submit setPosts={setPosts}/>} />
                <Route path="*" element={<h1>404 - Page Not Found</h1>} />
              </Routes>
            </BrowserRouter>
          );
        }
            
        export default App;

The .filter() function keeps items that return true in the callback function:

            array.filter((element, index) => condition);
In our case: 
            posts.filter((_, index) => index !== indexToDelete);