Access parent component state from child component - reactjs

Question

I can't figure out how to access parent component state from child component. When I try my code below I get an error in my parent components saying:
Stateless function components cannot have refs.
Can someone point in the right direction?
This is my parent Component (Podcast.js)
import React, { PureComponent } from 'react';
import PodcastItem from './PodcastItem';
class Podcast extends PureComponent { // PureComponent is preferred here instead of Component
constructor(props) {
super(props);
this.state = {
podcast: []
};
}
// Fetches podID from props.match
fetchPodcast () {
fetch(`https://itunes.apple.com/search?term=podcast&country=se&media=podcast&entity=podcast&limit=20`)
.then(response => response.json())
.then(data => this.setState({ podcast: data.results }));
}
componentDidMount () {
this.fetchPodcast()
}
// Check if new props is not the same as prevProps
componentDidUpdate (prevProps) {
// respond to parameter change
let oldId = prevProps.match.params.podID
let newId = this.props.match.params.podID
if (newId !== oldId)
this.fetchPodcast()
}
render() {
return (
<div>
<h2>Country ({this.props.match.params.podID}) </h2>
<ul>
{this.state.podcast.map(podcast => (
<PodcastItem key={podcast.collectionId} podcast={podcast} />
))}
</ul>
</div>
)
}
}
export default Podcast;
And this is the child component (PodcastItem.js)
import React from 'react';
// Here Stateless function is enough
const PodcastItem = ({ podcast }) => (
<li key={podcast.collectionId}>
<a ref={podcast.collectionId}>{podcast.collectionName}</a>
</li>
);
export default PodcastItem;