更改另一个组件中的状态

我正在尝试获取heartIconColor要在我的子组件中使用的变量。但我收到一个错误。我怎样才能让这个变量成为图标的颜色？

参考错误：找不到变量：heartIconColor

我的 app.js

export default class Home extends Component {
  constructor(props){
    super(props);
    this.state = {
      liked: false
    }
  }
  likePost = (author, id) => {
    alert("Liked!!" + author + id)
    this.liked()
  }
  liked(){
    this.setState({
      liked: !this.state.liked
    })
  }
  renderItem = ({ item, index }) => {
    return (
      <Post
        like={this.likePost} 
        liked={this.state.liked}
      />
    )
  }
  render() {
    const heartIconColor = this.state.liked ? "red" : null;
    return (
     <FlatList data={this.state.getData} renderItem={this.renderItem}>
     </FlatList>
    )
  }

我的组件：

const Post = (props) => {
const styles = StyleSheet.create({
heartIcon: {
      fontSize: 20,
      color: heartIconColor,
    }
})
return (
<View style={styles.flex}>
          <Text><Icon onPress={() => onClick={this.props.like}} style={styles.heartIcon} type="Octicons" name="heart" /></Text>
</View>
)
}
export { Post };