React Native params not updating-CodePudding

I am trying to pass params to a detail screen for a blog post but the first time i navigate to the detail screen, the params don't get passed (shows null). then i back to original screen and click on a new blog post and it'll show params from the first blog post..

This is my function to navigate to detail screen with params:

const [blogSelected, setBlogSelected] = useState(null);

const onBlogDetail = (item) => {
  setBlogSelected(item.id)
  navigation.navigate( 'BlogDetail', { blog_id: blogSelected });
};

This is how i am receiving them in the detail screen:

const BlogDetailScreen = ({route}) => {
  const blogID = route.params.blog_id

  //Using the param in a url for an API call
  const getBlogData = () => {
    try{
      axios.get('http://blog/' blogID /').then(res => {
        console.log(res.data)
      });
    } catch (error) {
      console.error(error);
    }
  };
}

Not sure why this is happening. Appreciate any help!! can provide more info too

CodePudding user response：

try this,

const onBlogDetail = (item) => {
  setBlogSelected(item.id)
  navigation.navigate( 'BlogDetail', { blog_id: item.id }); // pass item.id here
};