Update child component while using filter on parent component in React-CodePudding

I have seen this asked before but I can't seem to be able to wrap my head around it with my situation.

I am using a search bar to filter the data down and it works but the image will not update. The URL passing to the child works fine but it's just not changing its state. I just don't really understand how to implement it.

PokemonList.jsx

import axios from "axios";
import React, { useEffect, useState } from "react";
import PokemonSprite from "./PokemonSprite";
import Card from "@material-tailwind/react/Card";
import CardBody from "@material-tailwind/react/CardBody";
import CardFooter from "@material-tailwind/react/CardFooter";
import H6 from "@material-tailwind/react/Heading6";
import Paragraph from "@material-tailwind/react/Paragraph";
import Button from "@material-tailwind/react/Button";

// const baseURL = "https://pokeapi.co/api/v2/pokemon?limit=898";
const baseURL = "https://pokeapi.co/api/v2/pokemon?limit=20";

export default function PokemonList() {
    const [post, setPost] = useState([]);
    const [searchTerm, setSearchTerm] = useState('');

    useEffect(() => {
        axios.get(baseURL).then((response) => {
            setPost(response.data.results);
        });
    }, []);

    if (!post) return <p>Sorry, no results.</p>;

    return (
        <div>
            <input type="text" placeholder="Search..." onChange={e => {setSearchTerm(e.target.value)}}/>
            {post.filter((data) => {
                if (searchTerm == "") {
                    return data;
                } else if (data.name.toLowerCase().includes(searchTerm.toLowerCase())) {
                    console.log(data);
                    return data;
                }
            }).map((data, idx) => (
                <div className="p-5">
                    <Card key={idx}>
                        <PokemonSprite url={data.url} />
                        <CardBody>
                            <H6 color="gray">{data.name}</H6>
                            <Paragraph color="gray">
                                Don't be scared of the truth because we need to restart the human
                                foundation in truth And I love you like Kanye loves Kanye I love
                                Rick Owens’ bed design but the back is...
                            </Paragraph>
                        </CardBody>

                        <CardFooter>
                            <Button color="lightBlue" size="lg" ripple="light">
                                Read More
                            </Button>
                        </CardFooter>
                    </Card>
                </div>
            ))}
        </div>
        
    );
}

PokemonSprite.jsx

import axios from "axios";
import React, { useEffect, useState } from "react";
import CardImage from "@material-tailwind/react/CardImage";

export default function PokemonList(url) {
    const [post, setPost] = useState();

    console.log(url);

    useEffect(() => {
        axios.get(url.url).then((response) => {
        //console.log(response.data);
        setPost(response.data);
        });
    }, []);

   if (!post) return <p>Sorry, no results.</p>;
  return (
      <div>
        <CardImage
            src={post.sprites.front_default}
            alt="Card Image"
        />
      </div>
  );
}

CodePudding user response：

Please rewrite your PokemonSprite component like this to enable re rendering on updates to the Url...

import axios from "axios";
import React, { useEffect, useState } from "react";
import CardImage from "@material-tailwind/react/CardImage";

export default function PokemonList(url) {
    const [post, setPost] = useState();

    console.log(url);
    const getUpdatedImage = async (imageUrl) => {
        const response = await axios.get(imageUrl);
        setPost(response.data);
        return post;

    }
    useEffect(() => {
        getUpdatedImage(url.url);
    }, [url]);

   if (!post) return <p>Sorry, no results.</p>;
  return (
      <div>
        <CardImage
            src={post.sprites.front_default}
            alt="Card Image"
        />
      </div>
  );
}