Seperated input and output unit selectors by type prop.

unit-conversion/src/app.js

@@ -8,10 +8,9 @@ export function App() {
     <>
       <Route exact path={'/'}>
       </Route>
-      <UnitSelector id="inputUnitSelector"/>
+      <UnitSelector type="Input"/>
       <NumberInputField />
-      <h1>Ouput Section</h1>
-      <UnitSelector id="outputUnitSelector"/>
+      <UnitSelector type="Output"/>
       <EndingNumberOutput />
     </>
   );

unit-conversion/src/features/ending-number-output/endingNumberOutput.js

+import { useSelector } from 'react-redux';
+import { selectCurrentOutputUnit } from '../unit-selector/unitSelectorSlice';
+
 export function EndingNumberOutput() {
+  const currentOutputUnit = useSelector(selectCurrentOutputUnit);
   return (
     <div>
-      <h1>Number Output Text</h1>
+      <h1>{} {currentOutputUnit}</h1>
     </div>
   );
 }

unit-conversion/src/features/unit-selector/unitSelector.js

@@ -2,9 +2,16 @@ import { store } from '../../app/store';
 import { useDispatch } from 'react-redux';
 import {
   setCurrentInputUnit,
+  setCurrentOutputUnit,
 } from './unitSelectorSlice';
+import PropTypes from 'prop-types';
 
 export function UnitSelector(props) {
+  // type will either be 'Input' or 'Output'
+  UnitSelector.propTypes = {
+    type: PropTypes.string.isRequired,
+  };
+
   const unitSelectorOptions = [
     {
       label: 'Km',
@@ -33,9 +40,15 @@ export function UnitSelector(props) {
     const unsubscribe = store.subscribe(() =>
       console.log('State after dispatch: ', store.getState()),
     );
-    const currentInputUnit = e.target.value;
-    console.log(currentInputUnit);
-    disbatch(setCurrentInputUnit(currentInputUnit));
+    const currentUnit = e.target.value;
+    console.log(currentUnit);
+
+    if (props.type === 'Input'){
+      disbatch(setCurrentInputUnit(currentUnit));
+    }
+    if (props.type === 'Output'){
+      disbatch(setCurrentOutputUnit(currentUnit));
+    }
     unsubscribe();
   }
 
@@ -46,7 +59,7 @@ export function UnitSelector(props) {
   return (
     <div>
       <form onSubmit={handleSubmit}>
-        <h1>Unit Selector</h1>
+        <h1>{props.type} Unit Selector</h1>
         <div className="select-container">
           <select name="units" onChange={handleChange}>
             {unitSelectorOptions.map((option) =>

unit-conversion/src/features/unit-selector/unitSelectorSlice.js

@@ -3,8 +3,8 @@ import { createSlice } from '@reduxjs/toolkit';
 const unitSelectorSlice = createSlice({
   name: 'unitSelector',
   initialState: {
-    currentInputUnit: 'in',
-    currentOutputUnit: 'in',
+    currentInputUnit: 'km',
+    currentOutputUnit: 'km',
   },
   reducers: {
     // The action payload should have the unit to switch to with the in or out
@@ -34,3 +34,7 @@ export const {
 export function selectCurrentInputUnit(state) {
   return state.unitSelector.currentInputUnit;
 }
+
+export function selectCurrentOutputUnit(state) {
+  return state.unitSelector.currentOutputUnit;
+}