# Passing refs in React 19

> In this challenge, you will build a simple “Issue Creator” modal. The goal is to demonstrate how refs can be used to control focus in a component that is conditionally rendered.

- Difficulty: beginner
- Tags: useRef, useState, react 19
- Estimated time: 20 minutes
- Tests: 5
- Requires subscription: no

## Overview

In this challenge, you will build a simple “Issue Creator” modal. The goal is to demonstrate how refs can be used to control focus in a component that is conditionally rendered.

The challenge focuses on understanding how refs are passed and used across components in a React 19-style API, without relying on `forwardRef`.


## Requirements

- Clicking the **“Add issue”** button must render the `IssueModal`.
- When the modal opens, the `<textarea>` inside it must automatically receive focus.
- Clicking **Cancel** must close the modal.
- Clicking **Create** must also close the modal.
- The solution must not use `forwardRef`.


## Notes

- The challenge focuses on understanding how refs are passed and used across components in a React 19-style API, without relying on `forwardRef`.
- Create the ref in the parent and pass it directly to the `IssueModal` component.
- The ref must point to the `<textarea>` element inside the modal.
- Focus should be handled from the parent when the modal becomes visible.
- Use `IssueModalPre19` as a reference to understand the previous implementation pattern with `forwardRef`.


## Tests

01. renders the app title
02. focuses the issue textarea when opening the modal
03. opens the modal when clicking 'add issue'
04. close the when clicking cancel
05. close the modal when clicking cancel