# State Management

## Incrementing Number

Suppose we want to build an an app with the following requirements:

1. A Text component displaying the counter value, with an initial value of 0.
2. A Button to increment the counter.
3. Another Button to decrement the counter.

### Wrong Example

Without knowledge on React state management, our knowledge of javascript would tell us to do something like this:

```jsx
function Component() {
  let counter = 0;
  
  // DON'T DO THIS - mutating counter doesn't tell React to re-render
  return <Button onPress={() => counter += 1} />;
}
```

React Native doesn’t know when to re-render a component if we simply use let counter = 0 and update it. This breaks the rules for props since it involves mutating the value directly.

### Correct Example

Instead, React provides the useState hook to manage state changes and trigger re-renders appropriately.

```jsx
function Component() {
  const [counter, setCounter] = useState(0);
  
  // This is correct - the counter value is updated in the next render
  return <Button onPress={() => setCounter(counter + 1)} />;
}
```

## Managing Text

State is used in various components, such as TextInput, where the text changes every time the user types something. We use useState to track and update the text.

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

const TextInputComponent = () => {
  const [text, setText] = useState('');

  return (
    <View>
      <TextInput 
        style={styles.input} 
        value={text} 
        onChangeText={setText} 
        placeholder="Type here"
      />
    </View>
  );
};

```

## Conditional Rendering

Conditional rendering allows components to render dynamically based on the state. Here’s an example with a modal:

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

const ModalComponent = () => (
  <View>
    <Text>This is a modal!</Text>
  </View>
);

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const toggleModal = () => {
    setIsModalOpen(!isModalOpen);
  };

  return (
    <View >
      <Button title="Toggle Modal" onPress={toggleModal} />
      {isModalOpen && (
        <Modal
          transparent={true}
          visible={isModalOpen}
          onRequestClose={toggleModal}
        >
          <View>
            <ModalComponent />
            <Button title="Close Modal" onPress={toggleModal} />
          </View>
        </Modal>
      )}
    </View>
  );
};
```

In this example, the toggleModal function toggles the isModalOpen state, which conditionally renders the ModalComponent.