diff --git a/src/components/AddToProjects/FieldInputs/TaxonFieldInput.tsx b/src/components/AddToProjects/FieldInputs/TaxonFieldInput.tsx
index 33b6bfbe4..d5451b2b5 100644
--- a/src/components/AddToProjects/FieldInputs/TaxonFieldInput.tsx
+++ b/src/components/AddToProjects/FieldInputs/TaxonFieldInput.tsx
@@ -1,9 +1,11 @@
import ExploreTaxonSearchModal from "components/Explore/Modals/ExploreTaxonSearchModal";
-import { Body3 } from "components/SharedComponents";
-import { Pressable } from "components/styledComponents";
+import { Body3, DisplayTaxon } from "components/SharedComponents";
+import { Pressable, View } from "components/styledComponents";
import React, { useState } from "react";
import type { RealmTaxon } from "realmModels/types";
-import { useTranslation } from "sharedHooks";
+import { useTaxon, useTranslation } from "sharedHooks";
+
+import useObservationFieldValue from "../hooks/useObservationFieldValue";
interface Props {
obsFieldId: number;
@@ -11,10 +13,16 @@ interface Props {
const TaxonFieldInput = ( { obsFieldId }: Props ) => {
const { t } = useTranslation( );
- console.log( "obsFieldId", obsFieldId );
+ const { value, setValue } = useObservationFieldValue( obsFieldId );
const [showModal, setShowModal] = useState( false );
+ const { taxon } = useTaxon( { id: value } );
+
const updateTaxon = ( selectedTaxon: RealmTaxon | null ) => {
- console.log( "selectedTaxon", selectedTaxon );
+ if ( selectedTaxon?.id ) {
+ setValue( String( selectedTaxon.id ) );
+ } else {
+ setValue( null );
+ }
};
return (
@@ -24,14 +32,25 @@ const TaxonFieldInput = ( { obsFieldId }: Props ) => {
closeModal={( ) => setShowModal( false )}
updateTaxon={updateTaxon}
/>
- setShowModal( true )}
- >
-
- {t( "Select-a-species" )}
-
-
+ {value && taxon
+ ? (
+
+ setShowModal( true )}
+ taxon={taxon}
+ />
+
+ )
+ : (
+ setShowModal( true )}
+ >
+
+ {t( "Select-a-species" )}
+
+
+ )}
>
);
};