I am using a React Native Expo web app for the frontend and Django for the backend.
I have a search function that works fine. But the problem I am facing is that after a search term the property name of a specific animal has changed to a property id (number).
What I mean with this is that in the accordion the category name is shown. But after the search the category id is displayed.
In the frontend I have an accordion with some properties. The property for category looks:
export const AccordionItemsProvider = ({ children }) => {
const [categoryExpanded, setCategory] = useState(false);
const accordionItems = (item) => {
return (
<>
<List.Accordion
title="Familie"
expanded={categoryExpanded}
onPress={() => setCategory(!categoryExpanded)}>
<Text>{item.category}</Text>
</List.Accordion>
</>
);
};
return (
<AccordionItemsContext.Provider
value={{
accordionItems,
}}>
{children}
</AccordionItemsContext.Provider>
);
};
So the name of category will be displayed. But after the search the id of category will be displayd. And not the name.
The search context of animal looks:
/* eslint-disable prettier/prettier */
import React, { createContext, useEffect, useState } from "react";
import { fetchAnimalData } from "./animal/animal.service";
import useDebounce from "../hooks/use-debounce";
export const SearchAnimalContext = createContext();
export const SearchAnimalContextProvider = ({ children }) => {
const [searchAnimal, setSearchAnimal] = useState([]);
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [input, setInput] = useState("");
const debounce = useDebounce(input, 500);
useEffect(() => {
if (debounce === "") {
setResults([]);
return;
}
fetchAnimalData(debounce)
.then((response) => {
setResults(response);
})
.catch((err) => {
setError(err);
});
fetchAnimalData();
}, [debounce]);
const performSearch = async (text) => {
if (text.trim() === "") {
setResults([]);
}
setLoading(true);
setError(null);
setTimeout(() => {
fetchAnimalData(text)
.then((response2) => {
setResults(response2);
console.log(response2);
setLoading(false);
})
.catch((err) => {
setLoading(false);
setError(err);
});
}, 100);
};
return (
<SearchAnimalContext.Provider
value={{
results,
setResults,
searchAnimal,
setSearchAnimal,
input,
setInput,
performSearch,
loading,
error,
}}>
{children}
</SearchAnimalContext.Provider>
);
};
And the output after a search request of the console.log looks:
category
:
30
category_name
:
"Katachtigen - Felidae"
So before the search category is displayed correctly: “Katachtigen – Felidae”. But after the search category is displayed as 30 – category_id: which is not correct.
And the seach function in the component looks:
import React, { useContext, useEffect, useState } from "react";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { SearchAnimalContext } from "../../../services/search-animal.context";
import { fetchSubCategoryData } from "../../../services/category/category.service";
export const SubCategoryScreen = ({ route, navigation }) => {
const [isLoading, setLoading] = useState(true);
const { performSearch, results, setInput, input } = useContext(SearchAnimalContext);
const [isSearchbarFocused, setSearchbarFocused] = useState(false);
useEffect(() => {
fetchSubCategoryData(route.params.subcategories).then((data) => {
setSubCategoryList(data.animals.length > 0 ? data.animals : data.subcategories);
setLoading(false);
});
}, [route]);
const handleSearchChange = (text) => {
setInput(text);
if (text.length === 0) {
performSearch("");
navigation.navigate("dieren");
} else {
performSearch(text);
}
};
return (
<SafeArea>
{isLoading && (
<LoadingContainer>
<ActivityIndicator animating={true} color={MD2Colors.green200} />
</LoadingContainer>
)}
<Searchbar
placeholder="Search animals"
value={input}
onFocus={() => setSearchbarFocused(true)}
onChangeText={handleSearchChange}
onBlur={() => setSearchbarFocused(false)}
style={styles.searchbar}
/>
</SafeArea>
);
};
And the model animal from the backend looks:
import sys
from io import BytesIO
from django.db import models
class Animal(models.Model):
name = models.CharField(max_length=100, verbose_name="Naam")
sort = models.CharField(max_length=100, default='',
category = models.ForeignKey(
Category, related_name='animals', on_delete=models.CASCADE, verbose_name="Familie")
def category_name(self):
return self.category.name
class Meta:
verbose_name = "Dier"
verbose_name_plural = "Dieren"
# permissions = [("set_display_flag", "Check name is display or not",)]
super(Animal, self).save()
def __str__(self):
return self.name
How to display the correct category name and not the category id after a search request?