Cannot make element disappear/appear properly inside of my React App

JavaScript
1

So I have built a movie search app.

On the 4th page we have the ability to search for a specific movie or TV show.

Now I have built a logic that will display “Movies(Tv Shows) not found” when there are no search results.

Here is the code of the entire “Search” Component:

const Search = () => {
    const [type, setType] = useState(0);
    const [page, setPage] = useState(1);
    const [searchText, setSearchText] = useState("");
    const [content, setContent] = useState([]);
    const [numOfPages, setNumOfPages] = useState();
    const [noSearchResults, setNoSearchResults] = useState(false);

    const fetchSearch = async () => {
        try {
            const { data } = await axios.get(`https://api.themoviedb.org/3/search/${type ? "tv" : "movie"}?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchText}&page=${page}&include_adult=false`);
            setContent(data.results);
            setNumOfPages(data.total_pages);
        } catch (error) {
            console.error(error);
        }
    };

    const buttonClick = () => {
        fetchSearch().then(() => {
            if (searchText && content.length < 1) {
                setNoSearchResults(true);
            } else {
                setNoSearchResults(false);
            }
        });
    };

    useEffect(() => {
        window.scroll(0, 0);
        fetchSearch();
        // eslint-disable-next-line
    }, [page, type]);

    return (
        <div>
            <div style={{ display: "flex", margin: "25px 0" }}>
                <TextField className="textBox" label="Search" variant="outlined" style={{ flex: 1 }} color="secondary" onChange={e => setSearchText(e.target.value)} />
                <Button variant="contained" style={{ marginLeft: "10px" }} size="large" onClick={buttonClick}>
                    <SearchIcon color="secondary" fontSize="large" />
                </Button>
            </div>
            <Tabs
                value={type}
                indicatorColor="secondary"
                onChange={(event, newValue) => {
                    setPage(1);
                    setType(newValue);
                }}
                style={{
                    marginBottom: "20px",
                }}
            >
                <Tab style={{ width: "50%" }} label="Search Movies" />
                <Tab style={{ width: "50%" }} label="Search TV Shows" />
            </Tabs>
            <div className="trending">
                {content && content.map(c => <SingleContent key={c.id} id={c.id} poster={c.poster_path} title={c.title || c.name} date={c.first_air_date || c.release_date} media_type={type ? "tv" : "movie"} vote_average={c.vote_average} />)}
                {noSearchResults && (type ? <h2>Tv Shows not found</h2> : <h2>Movies not found</h2>)}
            </div>
            {numOfPages > 1 && <CustomPagination setpage={setPage} numOfPages={numOfPages} />}
        </div>
    );
};

You can see this in action here.

The problem that happens is that even when I have something in my search results, it still shows the Movies(Tv Shows) not found message.

And then if you click the search button again it will disappear.

A similar thing happens when there are no search results. Then the Movies(Tv Shows) not found message will not appear the first time, only when you press search again.

I don’t understand what is going on. I have used .then after my async function and still it does not execute in that order.

2

Try instead of .then(), put your setNoSearchResults logic into another useEffect() that triggers when searchText and content updates.

1 Like
3

Thanks for your feedback.
I have solved my problem by simply calling setNoSearchResults inside of my fetchSearch function.
It looks like this:

const fetchSearch = async () => {
        try {
            const { data } = await axios.get(`https://api.themoviedb.org/3/search/${type ? "tv" : "movie"}?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchText}&page=${page}&include_adult=false`);
            setContent(data.results);
            setNumOfPages(data.total_pages);
            setNoSearchResults(data.results.length < 1);
        } catch (error) {
            console.error(error);
        }
    };
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.