React functional component doesn't re-render when prop changes

Question

I'm using axios to request in my useEffect and the prop I pass is only a simple id. Here's the main part of my code;

    return (
        <>
            <Table striped bordered hover>

Answer 1

You forgot to pass the prop stationData in the dependency array:

    const [stationData, setStationData] = useState([]);

    useEffect(() => {
        console.log(`Fetching station ${stationId}`)
        axios.get(`http://localhost:3001/stations/${stationId}`)
            .then(response => {
                console.log(response);
                setStationData(response.data);
            })
            .catch(error => {
                console.log(error);
            });
    }, [stationData]); <--- HERE

    return (
        <>
            <Table striped bordered hover>