CODEWITHSUNDEEP
react-nativecomponentsreact-navigation
beyondtdr
beyondtdr

Reputation: 451

Passing 'navigation' AND 'props' to child components

Normally with navigation you receive the props on child component like this, with the curly braces:

const MatchHistoryScreen = ({ navigation, route }) => {

But I believe props you do without the curly braces, like this:

const MatchToggleComponent = (props) => {

So how do you combine both 'navigation' and 'props' for a child component? Putting 'props' in curly braces did not work for me. I think a potential use case for this is if you are passing down props from App.js together with your navigation prop.

Upvotes: 0

Views: 1022

Answers (2)

Konstantin
Konstantin

Reputation: 1458

So the props object is what a component receives from React depending on how you have configured your app. If you have Redux, then you are going to receive some props from there. If the component is a child, and you are passing some properties from the parent, you are going to receive props from the father too. If the parent is passing navigation, then you will have it as props in your child.

props is just an object that a component receives from multiple sources. It can actually be called anything, banana or sporp, it's just a convention to call that object props.

Destructuring on the other hand is used to "unpack" properties of an object (or values from an array) into separate variables. So when you are unpacking the navigation properties, you are essentially going from

const MatchToggleComponent = (props) => {
// props object contains navigation and route properties, which can be accessed as props.navigation and props.route

into

const MatchToggleComponent = ({ navigation, route }) => {
    // you unpack navigation and route properties into separate variables `navigation` and `route`, ready to be used in your component.

Imagine that the parent of MatchToggleComponent looks like

return (
  <>
    <MatchToggleComponent
      foo={bar}
      one={two}
    />
  </>
)

So your props object is going to have the foo property, one property, and then navigation property and route property. Destructuring effectively let's you pick the properties that interest you and "unpack" them, ready to be used inside your component without referencing the props object all the time.

So if you wanted to use foo prop, AND your navigation props, you would do

const MatchToggleComponent = ({ foo, navigation, route }) => {

You could do that in any component, just try it out.

If you have any additional questions please don't hesitate to continue the discussion :)

Edit 1:

req.query seems to be an object with properties userId and activeMethods. When you destructure the object, you should be using curly braces. Consequently, when you destructure arrays, you should be using square brackets []. The variable names that you destructure should be called the same as in the objects. For example:

const foo = {
  some: ...,
  other: ...,
  last: ...,
};

If you do const { bar } = foo, then JS is not going to know that you want to get the first prop of the object and this will throw an error. So the variable you create should match the prop name in the object, like

const { last, other } = foo;

As you can see, the order doesn't really matter (the situation is a bit different with arrays, but I won't be covering this here).

What you can do is that you can rename the variable WHILE destructuring properties from the object. Imagine you want to get the last prop from the foo object, but you want it named first for some reason. Then you would do

const { last: first } = foo;

This will effectively unpack the last prop from the foo object for you and rename it into first, so you'll be able to use const first across your code.

Upvotes: 2

glitch
glitch

Reputation: 11

You can do it with using useNavigation hook which gives access to navigation object.

example:

import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

Upvotes: 0

Related Questions