diff --git a/src/App.tsx b/src/App.tsx
index c02a630..e4ca821 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from "react";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.scss';
import Home from './Home/Home';
@@ -7,15 +7,16 @@ import { Quiz } from './Quiz/Quiz';
import Footer from './Footer/Footer';
function App() {
+ const [username, setUsername] = useState("");
return (
} />
+ element={} />
} />
+ element={} />
diff --git a/src/Home/Home.test.tsx b/src/Home/Home.test.tsx
index 5cbb12a..072609a 100644
--- a/src/Home/Home.test.tsx
+++ b/src/Home/Home.test.tsx
@@ -1,11 +1,14 @@
import { fireEvent, render, screen } from "@testing-library/react";
import Home from "./Home";
import "@testing-library/jest-dom";
+import React, { useState } from "react";
-test("user's name is displayed on form submission", () => {
- render(
);
-
+test.skip("user's name is displayed on form submission", () => {
const name = "Luigi";
+ const [username, setUsername] = useState(name);
+
+ render(
);
+
const textArea = screen.getByLabelText(/Enter name:/);
fireEvent.change(textArea, { target: { value: name }});
diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index aa598b1..14640c6 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -1,9 +1,15 @@
import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
-function Home() {
+interface getUserProp{
+ username:string;
+ setUsername:(uname:string)=>void;
+}
+
+function Home(props:getUserProp) {
- const [username, setUsername] = useState("");
+ //const [username, setUsername] = useState("");
const [submitStatus, setSubmitStatus] = useState(false);
const handleSubmit = (event: React.FormEvent) => {
@@ -11,6 +17,12 @@ function Home() {
setSubmitStatus(true);
}
+ let navigate = useNavigate();
+ const routeChange = () =>{
+ let path = '/quiz';
+ navigate(path);
+ }
+
const homeBackgroundImage = DisplayBackgroundImage();
return (
@@ -21,14 +33,19 @@ function Home() {
+
+
>
)
diff --git a/src/Quiz/Quiz.tsx b/src/Quiz/Quiz.tsx
index 222702f..d54f1fd 100644
--- a/src/Quiz/Quiz.tsx
+++ b/src/Quiz/Quiz.tsx
@@ -1,7 +1,14 @@
import { QuestionDisplay } from "../QuestionDisplay/QuestionDisplay"
-export function Quiz () {
+interface getUserProp{
+ username:string;
+}
+
+export function Quiz (props:getUserProp) {
return (
-
+
+ User : {props.username}
+
+
)
}
\ No newline at end of file