Q10 solution 1

HiddenVulnerabilities.js

import { useState } from "react";

function HiddenVulnerabilities() {
  const [userMessage, setUserMessage] = useState("");
  const [userEmail, setUserEmail] = useState("");
  const [messages, setMessages] = useState([]);

  const handleUserMessageChange = (e) => {
    setUserMessage(e.target.value);
  };
  const handleUserEmailChange = (e) => {
    setUserEmail(e.target.value);
  };
  const sendMessage = (e) => {
    e.preventDefault();
    setMessages([...messages, { email: userEmail, message: userMessage }]);
    setUserMessage("");
    setUserEmail("");
  };
  return (
    <div>
      <h3>Send a message</h3>
      <form method="post" id="form" onSubmit={sendMessage}>
        <input
          type="text"
          required
          placeholder="Your email"
          value={userEmail}
          onChange={handleUserEmailChange}
        />
        <br />
        <textarea
          placeholder="Your message"
          required
          value={userMessage}
          onChange={handleUserMessageChange}
        />
        <br />
        <button type="submit">Send</button>
      </form>

      <h3>Message</h3>
      {messages.map(({ email, message }, index) => (
        <div key={index}>
          <strong>{email}:</strong>
          <span>{message}</span>
        </div>
      ))}
    </div>
  );
}

export default HiddenVulnerabilities;