How to get params in React Navigation in class-based components?

Lakshya Agarwal 0
Viewed 24

Platform: React Native (Expo)

I want to get my params to a new screen using class-based components and React Navigation 6.0.

This is how I am sending the params:

this.props.navigation.navigate("BlogDetails", { blogID: item.ID });

and this is how I'm retrieving it:

componentDidMount() {
    const { blogID } = this.props.route.params;
    this.setState({ blobID: blogID });
    console.log(this.state.blobID);
  }

There are no errors, however, the console.log() returns "".

I am unable to find where I'm going wrong but I'm pretty sure the problem is somewhere during the retrieval, I'm pretty confident that the data is being sent to the screen.

react-navigation expo parameters react-native
3 Answers

state doesn't update immediately, if you want use state after update should act like this

componentDidMount() {
 const { blogID } = this.props.route.params;
 this.setState({ blobID: blogID }, () => {
  console.log(this.state.blobID);
 });
}
MehdiNasiriPoor0 
const {paramName1, paramName2, ...} = this.props.navigation.state.params
Surender Kumar0

It seems different for react navigation version.

const { blogID } = this.props.route.params;

or

const blogID = this.props.route.getParam('blogID);

try to use getParam function.

bb148160
Related