diff --git a/README.md b/README.md
index c5c5bc2..53930c1 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,43 @@
 # Coderbyte React Challenges
 
--   This repo contains my solutions for the [React Interview Kit](https://coderbyte.com/interview-kit/react) challenges.
+-   This repo contains my solutions for the [React & React Native challenges](https://coderbyte.com/challenges).
 
 -   All solutions received a 10/10 score.
 
 -   Feel free to use any of my solutions for yourself!
 
-### Update 1/8/23
+## Updates
 
-I added the missing solutions to the newer challenges Coderbyte made for React/React Native since I first created this repo. As of now, all challenges are solved. Since this repo seems to be popular, I will try to periodically check and update it with more solutions if Coderbyte decides to add more React challenges.
+#### 1/8/23
 
-### Update 6/13/23
+Added missing solutions for the newer challenges Coderbyte released.
 
-Refactored a few solutions!
+#### 6/13/23
 
-### Update 9/21/23
-Slight editing of README.
+Refactored a few solutions.
+
+#### 9/21/23
+
+Slight editing of `README`.
+
+#### 1/20/24
+
+-   Refactored all previous solutions to use React 18 and use .jsx/.tsx file extensions
+-   Redid solution for `tictactoe.jsx`
+-   Added new solutions for the following challenges:
+    -   `color-dropdown.jsx`
+    -   `letter-tiles.jsx`
+    -   `live-paragraph.jsx`
+    -   `quiz-builder.jsx`
+    -   `weather-dashboard.jsx`
+-   Updated `README``
+
+## FAQ
+
+**Can you include the challenge's question in your solution?**
+
+Unfortunately, no since I don't want to violate Coderbyte's [Terms of Use](https://coderbyte.com/terms). My solutions are only meant as a resource to check against your own or just to study from in general! You'll need to pay for Coderbyte to see the questions to their code challenges.
+
+**Do you accept submissions for alternative solutions?**
+
+No, not at this time. I originally intended to use this repo as a way to keep a copy of my solutions I wrote when I ended my Coderbyte subscription. However, since this repo has grown in popularity, if there is more interest to open this repo up and accept alternative solution submissions, I may consider this!
diff --git a/solutions/button-toggle.js b/solutions/button-toggle.js
deleted file mode 100644
index d530905..0000000
--- a/solutions/button-toggle.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-
-const Toggle = () => {
-
-  const [toggle, setToggle] = useState(false);
-  
-  const handleClick = () => {
-    setToggle(!toggle);
-  };
-
-    return (
-      <button type="button" onClick={handleClick}>
-        {toggle ? 'ON' : 'OFF'}
-      </button>
-    );
-};
-
-ReactDOM.render(
-  <Toggle />,
-  document.getElementById('root')
-);
\ No newline at end of file
diff --git a/solutions/button-toggle.jsx b/solutions/button-toggle.jsx
new file mode 100644
index 0000000..b75f0f1
--- /dev/null
+++ b/solutions/button-toggle.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+
+const Toggle = () => {
+    const [toggle, setToggle] = useState(false)
+
+    const handleClick = () => {
+        setToggle(!toggle)
+    }
+
+    return (
+        <button type="button" onClick={handleClick}>
+            {toggle ? "ON" : "OFF"}
+        </button>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<Toggle />)
diff --git a/solutions/color-dropdown.jsx b/solutions/color-dropdown.jsx
new file mode 100644
index 0000000..17e5e89
--- /dev/null
+++ b/solutions/color-dropdown.jsx
@@ -0,0 +1,21 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+
+function ColorSelector() {
+    const colors = { red: "Red", blue: "Blue", green: "Green" }
+    const [color, setColor] = useState(colors.red)
+    const onChange = e => setColor(e.target.value)
+    return (
+        <>
+            <select onChange={onChange} value={color}>
+                <option value={colors.red}>{colors.red}</option>
+                <option value={colors.blue}>{colors.blue}</option>
+                <option value={colors.green}>{colors.green}</option>
+            </select>
+            {color && <p>{`You have selected: ${color}`}</p>}
+        </>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<ColorSelector />)
diff --git a/solutions/context-api.js b/solutions/context-api.jsx
similarity index 70%
rename from solutions/context-api.js
rename to solutions/context-api.jsx
index ef025b6..ed846af 100644
--- a/solutions/context-api.js
+++ b/solutions/context-api.jsx
@@ -1,5 +1,5 @@
 import React, { useState, createContext, useContext } from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 
 const languages = ["JavaScript", "Python"]
 const LanguageContext = createContext({
@@ -8,25 +8,14 @@ const LanguageContext = createContext({
     setLanguage: () => {},
 })
 
-function App() {
-    const [language, setLanguage] = useState(languages[0])
-    return (
-        <LanguageContext.Provider value={{ languages, language, setLanguage }}>
-            <MainSection />
-        </LanguageContext.Provider>
-    )
-}
-
-function MainSection() {
+const MainSection = () => {
     const { languages, language, setLanguage } = useContext(LanguageContext)
     const currentIndex = languages.indexOf(language)
-    const toggleLanguage = () => {
-        if (currentIndex === languages.length - 1) {
-            setLanguage(languages[0])
-        } else {
-            setLanguage(languages[currentIndex + 1])
-        }
-    }
+    const toggleLanguage = () =>
+        currentIndex === languages.length - 1
+            ? setLanguage(languages[0])
+            : setLanguage(languages[currentIndex + 1])
+
     return (
         <div>
             <p id="favoriteLanguage">{`Favorite programming language: ${language}`}</p>
@@ -37,4 +26,14 @@ function MainSection() {
     )
 }
 
-ReactDOM.render(<App />, document.getElementById("root"))
+const App = () => {
+    const [language, setLanguage] = useState(languages[0])
+    return (
+        <LanguageContext.Provider value={{ languages, language, setLanguage }}>
+            <MainSection />
+        </LanguageContext.Provider>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<App />)
diff --git a/solutions/letter-tiles.jsx b/solutions/letter-tiles.jsx
new file mode 100644
index 0000000..b8d6e81
--- /dev/null
+++ b/solutions/letter-tiles.jsx
@@ -0,0 +1,83 @@
+import React, { useState, useCallback, useMemo } from "react"
+import { createRoot } from "react-dom/client"
+
+const style = {
+    letterContainer: {
+        overflow: "auto",
+        marginBottom: "10px",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    letter: {
+        float: "left",
+        padding: "10px 10px",
+        background: "#c9e4ed",
+        borderRadius: "5px",
+        marginRight: "5px",
+        marginTop: "5px",
+        cursor: "pointer",
+    },
+    outputString: {
+        marginTop: "20px",
+        textAlign: "center",
+    },
+}
+
+const Tile = ({ letter, outputArray, setOutputArray, tally, setTally }) => {
+    const onClick = useCallback(() => {
+        if (!tally[letter]) {
+            setTally({ ...tally, [`${letter}`]: 1 })
+            setOutputArray([...outputArray, letter])
+        } else if (tally[`${letter}`] && tally[`${letter}`] === 2) {
+            setTally({ ...tally, [`${letter}`]: 0 })
+            const slicedArray = outputArray.slice(0, outputArray.length - 2)
+            setOutputArray([...slicedArray, "_"])
+        } else {
+            setTally({ ...tally, [`${letter}`]: tally[`${letter}`] + 1 })
+            setOutputArray([...outputArray, letter])
+        }
+    }, [letter, outputArray, setOutputArray, tally, setTally])
+
+    return (
+        <button type="button" onClick={onClick} style={style.letter}>
+            {letter}
+        </button>
+    )
+}
+
+const Application = () => {
+    const [outputArray, setOutputArray] = useState([])
+    const [tally, setTally] = useState({})
+    const alphabetArray = useMemo(() => {
+        let arr = []
+        for (let i = 65; i <= 90; i++) {
+            const char = String.fromCharCode(i)
+            arr.push(char)
+        }
+        return arr
+    }, [])
+    return (
+        <section>
+            <aside style={style.letterContainer} id="letterContainer">
+                {alphabetArray.map((letter, index) => (
+                    <Tile
+                        tally={tally}
+                        setTally={setTally}
+                        letter={letter}
+                        key={index}
+                        outputArray={outputArray}
+                        setOutputArray={setOutputArray}
+                    />
+                ))}
+            </aside>
+            <div style={style.outputString} id="outputString">
+                {outputArray.join("")}
+            </div>
+        </section>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<Application />)
diff --git a/solutions/list.js b/solutions/list.js
deleted file mode 100644
index 820a0d2..0000000
--- a/solutions/list.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-const data = [
-  { name: 'Daniel', age: 25 },
-  { name: 'John', age: 24 },
-  { name: 'Jen', age: 31 },
-];
-
-const DataItem = ({ name, age}) => {
-  
-  return (
-    <li>
-      <span>{name}{` `}</span>
-      <span>{age}</span>
-    </li>
-  );
-};
-
-const DataList = () => {
-
-  return (
-    <div>
-      <h2>Data List</h2>
-      <ul>
-        {data.map((dataItem, index) => {
-          return (
-            <DataItem 
-              name={dataItem.name} 
-              age={dataItem.age} 
-              key={`data-item-${index}`} 
-            />
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-ReactDOM.render(
-  <DataList data={ data } />,
-  document.getElementById('root')
-);
\ No newline at end of file
diff --git a/solutions/list.jsx b/solutions/list.jsx
new file mode 100644
index 0000000..432df61
--- /dev/null
+++ b/solutions/list.jsx
@@ -0,0 +1,33 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+
+const data = [
+    { name: "Daniel", age: 25 },
+    { name: "John", age: 24 },
+    { name: "Jen", age: 31 },
+]
+
+const DataItem = ({ name, age }) => (
+    <li>
+        <span>{`${name} `}</span>
+        <span>{age}</span>
+    </li>
+)
+
+const DataList = ({ data }) => (
+    <div>
+        <h2>Data List</h2>
+        <ul>
+            {data.map((dataItem, index) => (
+                <DataItem
+                    name={dataItem.name}
+                    age={dataItem.age}
+                    key={`data-item-${index}`}
+                />
+            ))}
+        </ul>
+    </div>
+)
+
+const root = createRoot(document.getElementById("root"))
+root.render(<DataList data={data} />)
diff --git a/solutions/live-paragraph.jsx b/solutions/live-paragraph.jsx
new file mode 100644
index 0000000..e5b9ea9
--- /dev/null
+++ b/solutions/live-paragraph.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+
+function LiveText() {
+    const [text, setText] = useState("")
+
+    const onChange = ({ target: { value } }) => {
+        setText(value)
+    }
+    return (
+        <>
+            <input type="text" onChange={onChange} value={text} />
+            <p>{text}</p>
+        </>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<LiveText />)
diff --git a/solutions/phone-book.js b/solutions/phone-book.jsx
similarity index 90%
rename from solutions/phone-book.js
rename to solutions/phone-book.jsx
index 67b94bf..c5b73d0 100644
--- a/solutions/phone-book.js
+++ b/solutions/phone-book.jsx
@@ -1,5 +1,5 @@
-import React, { useState, useReducer } from "react"
-import ReactDOM from "react-dom"
+import React, { useState, useReducer, useCallback } from "react"
+import { createRoot } from "react-dom/client"
 
 const style = {
     table: {
@@ -34,7 +34,7 @@ const style = {
     },
 }
 
-function PhoneBookForm({ addEntryToPhoneBook }) {
+function PhoneBookForm({ entries, setEntries }) {
     const initialFormState = {
         userFirstname: "Coder",
         userLastname: "Byte",
@@ -55,6 +55,24 @@ function PhoneBookForm({ addEntryToPhoneBook }) {
     const onChange = ({ target: { name, value } }) =>
         dispatch({ type: name, payload: value })
 
+    const addEntryToPhoneBook = useCallback(() => {
+        const { userFirstname, userLastname, userPhone } = formState
+        const newEntries = [
+            ...entries,
+            { userFirstname, userLastname, userPhone },
+        ]
+        const newSortedEntries = newEntries.sort((a, b) => {
+            const userLastnameA = a.userLastname.toLowerCase()
+            const userLastnameB = b.userLastname.toLowerCase()
+            return userLastnameA < userLastnameB
+                ? -1
+                : userLastnameA > userLastnameB
+                ? 1
+                : 0
+        })
+        setEntries(newSortedEntries)
+    }, [formState])
+
     return (
         <form
             onSubmit={e => {
@@ -132,34 +150,13 @@ function InformationTable({ entries }) {
 
 function Application() {
     const [entries, setEntries] = useState([])
-
-    const addEntryToPhoneBook = ({
-        userFirstname,
-        userLastname,
-        userPhone,
-    }) => {
-        const newEntries = [
-            ...entries,
-            { userFirstname, userLastname, userPhone },
-        ]
-        const newSortedEntries = newEntries.sort((a, b) => {
-            const userLastnameA = a.userLastname.toLowerCase()
-            const userLastnameB = b.userLastname.toLowerCase()
-            return userLastnameA < userLastnameB
-                ? -1
-                : userLastnameA > userLastnameB
-                ? 1
-                : 0
-        })
-        setEntries(newSortedEntries)
-    }
-
     return (
         <section>
-            <PhoneBookForm addEntryToPhoneBook={addEntryToPhoneBook} />
+            <PhoneBookForm entries={entries} setEntries={setEntries} />
             <InformationTable entries={entries} />
         </section>
     )
 }
 
-ReactDOM.render(<Application />, document.getElementById("root"))
+const root = createRoot(document.getElementById("root"))
+root.render(<Application />)
diff --git a/solutions/quiz-builder.jsx b/solutions/quiz-builder.jsx
new file mode 100644
index 0000000..6d96c0f
--- /dev/null
+++ b/solutions/quiz-builder.jsx
@@ -0,0 +1,130 @@
+import React, { useState, useMemo } from "react"
+import { createRoot } from "react-dom/client"
+
+const style = {
+    container: {
+        padding: "20px",
+        border: "1px solid #E0E0E0",
+        borderRadius: "15px",
+        width: "max-content",
+        marginBottom: "40px",
+    },
+    question: {
+        fontWeight: "bold",
+        marginBottom: "10px",
+    },
+    options: {
+        marginBottom: "5px",
+    },
+    button: {
+        marginTop: "10px",
+        padding: "10px 15px",
+        border: "none",
+        backgroundColor: "#007BFF",
+        color: "#FFF",
+        fontSize: "14px",
+        borderRadius: "5px",
+        cursor: "pointer",
+    },
+    feedback: {
+        marginTop: "10px",
+        fontSize: "14px",
+    },
+}
+
+const QuizOption = ({ option, index, answer, setAnswer }) => {
+    const onChange = ({ target: { value } }) => setAnswer(value)
+    return (
+        <>
+            <input
+                type="radio"
+                onChange={onChange}
+                checked={option === answer}
+                name="answers"
+                value={option}
+                id={`option${index}`}
+            />
+            <label htmlFor={option}>{option}</label>
+        </>
+    )
+}
+
+function QuizApp() {
+    // do not modify the questions or answers below
+    const questions = useMemo(
+        () => [
+            {
+                question: "What is the capital of France?",
+                options: ["London", "Paris", "Berlin", "Madrid"],
+                correct: "Paris",
+            },
+            {
+                question: "What is the capital of Germany?",
+                options: ["Berlin", "Munich", "Frankfurt", "Hamburg"],
+                correct: "Berlin",
+            },
+        ],
+        []
+    )
+
+    const questionsTotal = useMemo(() => questions.length, [questions])
+
+    const [questionsIndex, setQuestionsIndex] = useState(0)
+    const [score, setScore] = useState(0)
+    const [feedback, setFeedback] = useState(null)
+    const [answer, setAnswer] = useState(null)
+    const [completedQuiz, setCompletedQuiz] = useState(false)
+
+    const submit = () => {
+        if (answer === questions[questionsIndex].correct) {
+            setScore(score + 1)
+            setFeedback("Correct!")
+        } else {
+            setFeedback("Incorrect!")
+        }
+
+        if (questionsIndex === questionsTotal - 1) {
+            setCompletedQuiz(true)
+        } else {
+            setQuestionsIndex(questionsIndex + 1)
+            setAnswer(null)
+        }
+    }
+
+    return (
+        <div style={style.container}>
+            <div id="question" style={style.question}>
+                {`${questions[questionsIndex].question}`}
+            </div>
+            <div style={style.options}>
+                {questions[questionsIndex].options.map((option, index) => (
+                    <QuizOption
+                        key={`option-${index}`}
+                        option={option}
+                        index={index}
+                        answer={answer}
+                        setAnswer={setAnswer}
+                    />
+                ))}
+            </div>
+            <button
+                disabled={completedQuiz}
+                style={style.button}
+                id="submitBtn"
+                onClick={submit}
+            >
+                Submit
+            </button>
+            <div id="feedback" style={style.feedback}>
+                {questionsIndex !== 0 && !completedQuiz && `${feedback}`}
+            </div>
+            <div id="score" style={style.feedback}>
+                {completedQuiz &&
+                    `Quiz complete! You scored ${score} out of ${questions.length}!`}
+            </div>
+        </div>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<QuizApp />)
diff --git a/solutions/react-native-simple-counter.js b/solutions/react-native-simple-counter.jsx
similarity index 66%
rename from solutions/react-native-simple-counter.js
rename to solutions/react-native-simple-counter.jsx
index 26c4822..c6b6dbe 100644
--- a/solutions/react-native-simple-counter.js
+++ b/solutions/react-native-simple-counter.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { Text, View, StyleSheet, Button } from "react-native"
+import { Text, View, StyleSheet } from "react-native"
 
 const SimpleCounter = () => {
     const [count, setCount] = useState(0)
@@ -9,11 +9,11 @@ const SimpleCounter = () => {
     return (
         <View style={styles.container}>
             <Text style={styles.counter}>
-                button count: <Text id="actualCount">{count}</Text>
+                button count: <span id="actualCount">{count}</span>
             </Text>
-            <Button id="mainButton" onPress={increment}>
-                INCREASE
-            </Button>
+            <button id="mainButton" onClick={increment}>
+                Increase
+            </button>
         </View>
     )
 }
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
     },
     counter: {
         textAlign: "center",
-        marginVertical: 10,
+        marginVertical: 20,
     },
 })
 
diff --git a/solutions/simple-counter.js b/solutions/simple-counter.js
deleted file mode 100644
index c4c92b4..0000000
--- a/solutions/simple-counter.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-
-const Counter = () => {
-  const [count, setCount] = useState(0);
-
-  increment = () => {
-    setCount(prevCount => prevCount + 1);
-  };
-
-  return (
-    <div id="mainArea">
-      <p>
-        Button Count: 
-        <span>{count}</span>
-      </p>
-      <button 
-        onClick={increment} 
-        id="mainButton"
-      >
-        Increase
-      </button>
-    </div>
-  );
-};
-
-ReactDOM.render(
-  <Counter />,
-  document.getElementById('root')
-);
\ No newline at end of file
diff --git a/solutions/simple-counter.jsx b/solutions/simple-counter.jsx
new file mode 100644
index 0000000..ebea834
--- /dev/null
+++ b/solutions/simple-counter.jsx
@@ -0,0 +1,25 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+
+const Counter = () => {
+    const [count, setCount] = useState(0)
+
+    const increment = () => {
+        setCount(prevCount => prevCount + 1)
+    }
+
+    return (
+        <div id="mainArea">
+            <p>
+                {`Button Count: `}
+                <span>{count}</span>
+            </p>
+            <button onClick={increment} id="mainButton">
+                Increase
+            </button>
+        </div>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<Counter />)
diff --git a/solutions/tic-tac-toe.js b/solutions/tic-tac-toe.js
deleted file mode 100644
index 38289ee..0000000
--- a/solutions/tic-tac-toe.js
+++ /dev/null
@@ -1,288 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-
-const rowStyle = {
-  display: 'flex'
-}
-
-const squareStyle = {
-  'width':'60px',
-  'height':'60px',
-  'backgroundColor': '#ddd',
-  'margin': '4px',
-  'display': 'flex',
-  'justifyContent': 'center',
-  'alignItems': 'center',
-  'fontSize': '20px',
-  'color': 'white',
-  'cursor': 'pointer',
-}
-
-const boardStyle = {
-  'backgroundColor': '#eee',
-  'width': '208px',
-  'alignItems': 'center',
-  'justifyContent': 'center',
-  'display': 'flex',
-  'flexDirection': 'column',
-  'border': '3px #eee solid'
-}
-
-const containerStyle = {
-  'display': 'flex',
-  'alignItems': 'center',
-  'flexDirection': 'column'
-}
-
-const instructionsStyle = {
-  'marginTop': '5px',
-  'marginBottom': '5px',
-  'fontWeight': 'bold',
-  'fontSize': '16px',
-}
-
-const buttonStyle = {
-  'marginTop': '15px',
-  'marginBottom': '16px',
-  'width': '80px',
-  'height': '40px',
-  'backgroundColor': '#8acaca',
-  'color': 'white',
-  'fontSize': '16px',
-  'cursor': 'pointer',
-}
-
-const Square = ({playerXSquares, playerOSquares, handleClick, value, disabled }) => {
-  return (
-    <div
-      className="square"
-      style={squareStyle}
-      disabled={disabled}
-      value={value}
-      onClick={() => {
-        if (!disabled) {
-          handleClick(value)
-        }
-      }}
-    >
-      <span className="square-text">
-        {playerXSquares.indexOf(value) > -1 ? 'X' : playerOSquares.indexOf(value) > -1 ? 'O' : ''}
-      </span>
-    </div>
-  );
-};
-
-const Board = () => {
-  const [currentPlayer, setCurrentPlayer] = useState('player X');
-  const [winner, setWinner] = useState('None')
-  const [playerXSquares, setPlayerXSquares] = useState([]);
-  const [playerOSquares, setPlayerOSquares] = useState([]);
-
-  const handleClick = value => {
-    if (currentPlayer === 'player X') {
-      setPlayerXSquares([...playerXSquares, value]);
-      setCurrentPlayer('player O');
-    } else {
-      setPlayerOSquares([...playerOSquares, value]);
-      setCurrentPlayer('player X');
-    }
-  }
-
-  const determineWinner = (playerXSquares, playerOSquares) => {
-    function checkRows() {
-      if (
-      (playerXSquares.includes(0) && playerXSquares.includes(1) && playerXSquares.includes(2)) ||
-      (playerXSquares.includes(3) && playerXSquares.includes(4) && playerXSquares.includes(5)) ||
-      (playerXSquares.includes(6) && playerXSquares.includes(7) && playerXSquares.includes(8))
-      ) {
-        return setWinner('Player X');
-      }
-
-      if (
-      (playerOSquares.includes(0) && playerOSquares.includes(1) && playerOSquares.includes(2)) ||
-      (playerOSquares.includes(3) && playerOSquares.includes(4) && playerOSquares.includes(5)) ||
-      (playerOSquares.includes(6) && playerOSquares.includes(7) && playerOSquares.includes(8))
-      ) {
-        return setWinner('Player O');
-      }
-    }
-
-    function checkColumns() {
-      if (
-      (playerXSquares.includes(0) && playerXSquares.includes(3) && playerXSquares.includes(6)) ||
-      (playerXSquares.includes(1) && playerXSquares.includes(4) && playerXSquares.includes(7)) ||
-      (playerXSquares.includes(2) && playerXSquares.includes(5) && playerXSquares.includes(8))
-      ) {
-        return setWinner('Player X');
-      }
-
-      if (
-      (playerOSquares.includes(0) && playerOSquares.includes(3) && playerOSquares.includes(6)) ||
-      (playerOSquares.includes(1) && playerOSquares.includes(4) && playerOSquares.includes(7)) ||
-      (playerOSquares.includes(2) && playerOSquares.includes(5) && playerOSquares.includes(8))
-      ) {
-        return setWinner('Player O');
-      }
-    }
-
-    function checkDiagonals() {
-      if (playerXSquares.includes(4)) {
-        if ((playerXSquares.includes(0) && playerXSquares.includes(8)) || (playerXSquares.includes(2) && playerXSquares.includes(6))) {
-          return setWinner('Player X');
-        }
-      }
-      if (playerOSquares.includes(4)) {
-        if ((playerOSquares.includes(0) && playerOSquares.includes(8)) || (playerOSquares.includes(2) && playerOSquares.includes(6))) {
-          return setWinner('Player O');
-        }
-      }
-    }
-
-    if (winner === 'None') {
-      checkRows();
-      checkColumns();
-      checkDiagonals();
-    }
-  }
-
-
-  const reset = () => {
-    setCurrentPlayer('Player X');
-    setPlayerXSquares([]);
-    setPlayerOSquares([]);
-    setWinner('None');
-  }
-
-  useEffect(() => {
-    determineWinner(playerXSquares, playerOSquares);
-  }, [playerXSquares, playerOSquares]);
-
-  return (
-    <div 
-      style={containerStyle} 
-      className="gameBoard"
-    >
-      <div 
-        id="statusArea" 
-        className="status" 
-        style={instructionsStyle}
-      >
-        Next player: <span>{currentPlayer === 'Player X' ? 'Player O' : 'Player X'}</span>
-      </div>
-      <div 
-        id="winnerArea" 
-        className="winner" 
-        style={instructionsStyle}
-      >
-        Winner: <span>{winner}</span>
-      </div>
-      <button 
-        onClick={reset} 
-        style={buttonStyle}
-      >
-        Reset
-      </button>
-      <div 
-        style={boardStyle}
-      >
-        <div 
-          className="board-row" 
-          style={rowStyle}
-        >
-          <Square 
-            disabled={playerXSquares.includes(0) || playerOSquares.includes(0) || winner !== 'None'} 
-            playerXSquares={playerXSquares} 
-            playerOSquares={playerOSquares} 
-            handleClick={handleClick} 
-            value={0} 
-          />
-          <Square 
-            disabled={playerXSquares.includes(1) || playerOSquares.includes(1) || winner !== 'None'} 
-            playerXSquares={playerXSquares} 
-            playerOSquares={playerOSquares} 
-            handleClick={handleClick} 
-            value={1} 
-          />
-          <Square 
-            disabled={playerXSquares.includes(2) || playerOSquares.includes(2) || winner !== 'None'} 
-            playerXSquares={playerXSquares} 
-            playerOSquares={playerOSquares} 
-            handleClick={handleClick} 
-            value={2} 
-          />
-        </div>
-        <div 
-          className="board-row" 
-          style={rowStyle}
-        >
-          <Square 
-            disabled={playerXSquares.includes(2) || playerOSquares.includes(3) || winner !== 'None'} 
-            playerXSquares={playerXSquares} 
-            playerOSquares={playerOSquares} 
-            handleClick={handleClick} 
-            value={3} 
-          />
-          <Square 
-            disabled={playerXSquares.includes(2) || playerOSquares.includes(4) || winner !== 'None'} 
-            playerXSquares={playerXSquares} 
-            playerOSquares={playerOSquares} 
-            handleClick={handleClick} 
-            value={4} 
-          />
-          <Square 
-            disabled={playerXSquares.includes(2) || playerOSquares.includes(5) || winner !== 'None'} 
-            playerXSquares={playerXSquares} 
-            playerOSquares={playerOSquares} 
-            handleClick={handleClick} 
-            value={5} 
-          />
-        </div>
-        <div 
-          className="board-row" 
-          style={rowStyle}
-        >
-          <Square 
-            disabled={playerXSquares.includes(2) || playerOSquares.includes(6) || winner !== 'None'} 
-            playerXSquares={playerXSquares} 
-            playerOSquares={playerOSquares} 
-            handleClick={handleClick} 
-            value={6} 
-          />
-          <Square 
-            disabled={playerXSquares.includes(2) || playerOSquares.includes(7) || winner !== 'None'} 
-            playerXSquares={playerXSquares} 
-            playerOSquares={playerOSquares} 
-            handleClick={handleClick} 
-            value={7} 
-          />
-          <Square 
-            disabled={playerXSquares.includes(2) || playerOSquares.includes(8) || winner !== 'None'} 
-            playerXSquares={playerXSquares} 
-            playerOSquares={playerOSquares} 
-            handleClick={handleClick} 
-            value={8} 
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const Game = () => {
-  return (
-    <div 
-      className="game"
-    >
-      <div 
-        className="game-board"
-      >
-        <Board />
-      </div>
-    </div>
-  );
-};
-
-ReactDOM.render(
-  <Game />,
-  document.getElementById('root')
-);
\ No newline at end of file
diff --git a/solutions/tic-tac-toe.jsx b/solutions/tic-tac-toe.jsx
new file mode 100644
index 0000000..5b7e8ee
--- /dev/null
+++ b/solutions/tic-tac-toe.jsx
@@ -0,0 +1,202 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+
+const rowStyle = {
+    display: "flex",
+}
+
+const squareStyle = {
+    width: "60px",
+    height: "60px",
+    backgroundColor: "#ddd",
+    margin: "4px",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    fontSize: "20px",
+    color: "white",
+}
+
+const disabledSquareStyle = {
+    ...squareStyle,
+    cursor: "not-allowed",
+}
+
+const boardStyle = {
+    backgroundColor: "#eee",
+    width: "208px",
+    alignItems: "center",
+    justifyContent: "center",
+    display: "flex",
+    flexDirection: "column",
+    border: "3px #eee solid",
+}
+
+const containerStyle = {
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "column",
+}
+
+const instructionsStyle = {
+    marginTop: "5px",
+    marginBottom: "5px",
+    fontWeight: "bold",
+    fontSize: "16px",
+}
+
+const buttonStyle = {
+    marginTop: "15px",
+    marginBottom: "16px",
+    width: "80px",
+    height: "40px",
+    backgroundColor: "#8acaca",
+    color: "white",
+    fontSize: "16px",
+}
+
+const Square = ({ value, onClick, winner }) => {
+    return (
+        <button
+            className="square"
+            onClick={() => onClick(value)}
+            style={
+                value !== null || winner !== "None"
+                    ? disabledSquareStyle
+                    : squareStyle
+            }
+            disabled={value !== null || winner !== "None"}
+        >
+            {value}
+        </button>
+    )
+}
+
+const Board = () => {
+    const [player, setPlayer] = useState("X")
+    const [winner, setWinner] = useState("None")
+    const [board, setBoard] = useState(() => Array(9).fill(null))
+
+    const matches = [
+        [0, 1, 2],
+        [3, 4, 5],
+        [6, 7, 8],
+        [0, 3, 6],
+        [1, 4, 7],
+        [2, 5, 8],
+        [0, 4, 8],
+        [2, 4, 6],
+    ]
+
+    const checkWinner = newBoard => {
+        for (let i = 0; i < matches.length; i++) {
+            const [a, b, c] = matches[i]
+            if (
+                newBoard[a] === player &&
+                newBoard[b] === player &&
+                newBoard[c] === player
+            ) {
+                return true
+            }
+        }
+        return false
+    }
+
+    const onClick = index => {
+        const newBoard = [...board]
+        newBoard[index] = player
+        setBoard(newBoard)
+
+        if (checkWinner(newBoard)) {
+            setWinner(player)
+        } else {
+            setPlayer(player === "X" ? "O" : "X")
+        }
+    }
+
+    const onReset = () => {
+        setBoard(Array(9).fill(null))
+        setPlayer("X")
+        setWinner("None")
+    }
+
+    return (
+        <div style={containerStyle} className="gameBoard">
+            <div id="statusArea" className="status" style={instructionsStyle}>
+                Next player: <span>{player === "X" ? "O" : "X"}</span>
+            </div>
+            <div id="winnerArea" className="winner" style={instructionsStyle}>
+                Winner: <span>{winner !== "None" && winner}</span>
+            </div>
+            <button style={buttonStyle} onClick={onReset}>
+                Reset
+            </button>
+            <div style={boardStyle}>
+                <div className="board-row" style={rowStyle}>
+                    <Square
+                        value={board[0]}
+                        onClick={() => onClick(0)}
+                        winner={winner}
+                    />
+                    <Square
+                        value={board[1]}
+                        onClick={() => onClick(1)}
+                        winner={winner}
+                    />
+                    <Square
+                        value={board[2]}
+                        onClick={() => onClick(2)}
+                        winner={winner}
+                    />
+                </div>
+                <div className="board-row" style={rowStyle}>
+                    <Square
+                        value={board[3]}
+                        onClick={() => onClick(3)}
+                        winner={winner}
+                    />
+                    <Square
+                        value={board[4]}
+                        onClick={() => onClick(4)}
+                        winner={winner}
+                    />
+                    <Square
+                        value={board[5]}
+                        onClick={() => onClick(5)}
+                        winner={winner}
+                    />
+                </div>
+                <div className="board-row" style={rowStyle}>
+                    <Square
+                        value={board[6]}
+                        onClick={() => onClick(6)}
+                        winner={winner}
+                    />
+                    <Square
+                        value={board[7]}
+                        onClick={() => onClick(7)}
+                        winner={winner}
+                    />
+                    <Square
+                        value={board[8]}
+                        onClick={() => onClick(8)}
+                        winner={winner}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+const Game = () => {
+    return (
+        <div className="game">
+            <div className="game-board">
+                <Board />
+            </div>
+        </div>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<Game />)
diff --git a/solutions/typescript-button-toggle.ts b/solutions/typescript-button-toggle.ts
deleted file mode 100644
index 618fc2e..0000000
--- a/solutions/typescript-button-toggle.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { useState, ReactNode } from "react"
-import ReactDOM from "react-dom"
-
-function Toggle(): ReactNode {
-    const [toggle, setToggle] = useState<boolean>(true)
-
-    function onClick(): void {
-        setToggle(!toggle)
-    }
-
-    return (
-        <button type="button" onClick={onClick}>
-            {toggle ? "ON" : "OFF"}
-        </button>
-    )
-}
-
-ReactDOM.render(<Toggle />, document.getElementById("root"))
diff --git a/solutions/typescript-button-toggle.tsx b/solutions/typescript-button-toggle.tsx
new file mode 100644
index 0000000..7cc1f07
--- /dev/null
+++ b/solutions/typescript-button-toggle.tsx
@@ -0,0 +1,15 @@
+import React, { useState, ReactNode } from "react"
+import { createRoot } from "react-dom/client"
+
+const Toggle: ReactNode = () => {
+    const [toggle, setToggle] = useState<boolean>(true)
+
+    const onClick = (): void => {
+        setToggle(!toggle)
+    }
+
+    return <button onClick={onClick}>{toggle ? "ON" : "OFF"}</button>
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<Toggle />)
diff --git a/solutions/weather-dashboard.jsx b/solutions/weather-dashboard.jsx
new file mode 100644
index 0000000..677f148
--- /dev/null
+++ b/solutions/weather-dashboard.jsx
@@ -0,0 +1,121 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+
+const style = {
+    marginTop: {
+        marginTop: "10px",
+    },
+    marginRight: {
+        marginRight: "10px",
+    },
+}
+
+const WeatherDashboard = () => {
+    // instead of requesting data from an API, use this mock data
+    const mockWeatherData = {
+        "New York": {
+            temperature: "22°C",
+            humidity: "56%",
+            windSpeed: "15 km/h",
+        },
+        "Los Angeles": {
+            temperature: "27°C",
+            humidity: "45%",
+            windSpeed: "10 km/h",
+        },
+        London: {
+            temperature: "15°C",
+            humidity: "70%",
+            windSpeed: "20 km/h",
+        },
+    }
+
+    const defaultWeather = {
+        temperature: "",
+        humidity: "",
+        windSpeed: "",
+    }
+
+    const [city, setCity] = useState("")
+    const [cache, setCache] = useState({})
+    const [notFound, setNotFound] = useState(false)
+    const [previousSearches, setPreviousSearches] = useState([])
+    const [weather, setWeather] = useState(defaultWeather)
+
+    const mockFetchWeatherData = city => {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                if (mockWeatherData[city]) {
+                    resolve(mockWeatherData[city])
+                } else {
+                    reject(new Error("City not found."))
+                    setNotFound(true)
+                    setWeather(defaultWeather)
+                }
+            }, 500)
+        })
+    }
+
+    const search = async city => {
+        setNotFound(false)
+
+        if (!city || city === "") {
+            setWeather(defaultWeather)
+            setNotFound(true)
+            return
+        }
+
+        if (cache[city]) {
+            setWeather(cache[city])
+            return
+        }
+
+        try {
+            const data = await mockFetchWeatherData(city)
+            setCache({ ...cache, [city]: data })
+            setWeather(data)
+            setPreviousSearches([...previousSearches, city])
+        } catch {
+            throw new Error("Could not fetch weather data.")
+        }
+    }
+
+    return (
+        <div>
+            <input
+                type="text"
+                id="citySearch"
+                placeholder="Search for a city..."
+                value={city}
+                onChange={e => setCity(e.target.value)}
+            />
+            <button id="searchButton" onClick={() => search(city)}>
+                Search
+            </button>
+            <div id="weatherData" style={style.marginTop}>
+                <div>Temperature: {weather.temperature}</div>
+                <div>Humidity: {weather.humidity}</div>
+                <div>Wind Speed: {weather.windSpeed}</div>
+                {notFound && <div style={style.marginTop}>City not found.</div>}
+            </div>
+            <div id="previousSearches" style={style.marginTop}>
+                {previousSearches.length > 0 &&
+                    previousSearches.map((previousSearch, index) => (
+                        <button
+                            key={index}
+                            onClick={() => {
+                                setCity(previousSearch)
+                                search(previousSearch)
+                            }}
+                            style={style.marginRight}
+                        >
+                            {previousSearch}
+                        </button>
+                    ))}
+            </div>
+        </div>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<WeatherDashboard />)