What are the types of data that control a component?

In React Native, there are two primary types of data that control a component: props and state.

Props

• Definition: Props, short for properties, are read-only attributes that are passed from a parent component to a child component. They allow for the transfer of data and configuration settings between components.
• Characteristics:
  • Immutable: Once set by the parent component, props cannot be changed by the child component.
  • Unidirectional Data Flow: Props facilitate a one-way data flow from parent to child, ensuring that the child component's behavior and appearance are dictated by the parent.
  • Usage: Props are typically used to pass data and callback functions to child components, enabling communication and data sharing between components.
• Example:

  // Parent Component
  function App() {
    const fruits = { name: "Mango", color: "Yellow" };
    return (
      <div className="App">
        <Fruit fruits={fruits} />
      </div>
    );
  }
  
  // Child Component
  function Fruit(props) {
    return (
      <div className="fruit">
        <h1>List of Fruits</h1>
        <p>Name: {props.fruits.name}</p>
        <p>Color: {props.fruits.color}</p>
      </div>
    );
  }

State

• Definition: State is a mutable data structure that is managed within the component itself. It holds information that may change over the component's lifecycle and can trigger re-renders when updated.
• Characteristics:
  • Mutable: Unlike props, state can be changed using the setState method.
  • Local to Component: State is confined to the component that defines it and cannot be directly accessed or modified by other components.
  • Usage: State is used to store dynamic data that affects the component's behavior or appearance, such as user inputs, form data, or data fetched from an API.
• Example:

  class Form extends React.Component {
    constructor(props) {
      super(props);
      this.state = { input: '' };
    }
  
    handleChangeInput = (text) => {
      this.setState({ input: text });
    }
  
    render() {
      const { input } = this.state;
      return (
        <...