# Props

Props is how react components communicate with each other. Every parent component can pass information to its child components by giving them props.

We've already seen props (short for properties) before, like how we pass in `onPress` is passed to the `Button` component, or how the `styles` is passed to the `View` component. Just like how functions can take in arguments, components can take in properties.

```jsx
import React from 'react';
import { View, Text, Button } from 'react-native';

// Child component
const Greeting = (props) => {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
};

// Parent component
const App = () => {
  return (
    <View style={styles.container}>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </View>
  );
};
```

You can also pass functions as props!

```jsx
import React from 'react';
import { View, Button } from 'react-native';

// Child component
const MyButton = (props) => {
  return (
    <Button title={props.title} onPress={props.onPress} />
  );
};

// Parent component
const App = () => {
  const handlePress = () => {
    alert('Button was pressed!');
  };

  return (
    <View>
      <MyButton title="Press Me" onPress={handlePress} />
    </View>
  );
};
```

In this example, the MyButton component receives a title and an onPress function as props from the parent App component. When the button is pressed, it triggers the handlePress function in the parent component.

Instead of using props, you can destructure the arguments directly in the function signature. This makes it clear which props the component expects and avoids the need to repeatedly write `props`.

```jsx
import React from 'react';
import { View, Button } from 'react-native';

// Child component using destructuring
const MyButton = ({ title, onPress }) => {
  return (
    <Button title={title} onPress={onPress} />
  );
};

// Parent component
const App = () => {
  const handlePress = () => {
    alert('Button was pressed!');
  };

  return (
    <View style={styles.container}>
      <MyButton title="Press Me" onPress={handlePress} />
    </View>
  );
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.nushackers.org/orbital/react-native/props.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.