> For the complete documentation index, see [llms.txt](https://project-match.gitbook.io/project-match/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://project-match.gitbook.io/project-match/untitled-1/untitled.md).

# React Component Setup

## 1. Set up types file for react component props and state

{% code title="src/types/Redux.d.ts" %}

```typescript
import { Dispatch } from 'react-redux';
import { User } from './User.d';
import { register_fntype } from '../actions/userActions';

export interface Action { 
    type: string;
}

export interface UserAction extends Action { 
    data?: User; 
    error?: string;
}

export type Users = Array<User>;

export type UserState = User | {};

// defines types of everything in Redux Store
export interface Store { 
    user: User; 
}

// defines Prop types passed to the Register React component
// this would define any redux actions and state passed into the component
// essentially, anything in mapStateToProps and mapDispatchToProps would be 
// defined here
export interface RegisterProps { 
    register: register_fntype; 
    completeRegistration: any;
}

```

{% endcode %}

{% code title="src/types/Register.d.ts" %}

```typescript
// defines the types of everything stored in the react component state
export interface RegisterState { 
    firstName: string; 
    lastName: string; 
    email: string; 
    password: string; 
    username: string; 
    shouldRedirect: boolean;
}

```

{% endcode %}

## 2. Set Up React Component

{% code title="src/RegisterLoginPage/Register.tsx" %}

```jsx
import * as React from 'react';
import { connect } from 'react-redux';
import { Store } from '../types/Redux';
import { RegisterState } from '../types/Register.d';
import { RegisterProps } from '../types/Redux.d';
import { register } from '../actions/userActions';
import { showRegisterWindow, completeRegistration} from '../actions/appActions';

class Register extends React.Component<RegisterProps, RegisterState> { 
    constructor(props: RegisterProps) { 
        super(props); 
        this.state = { 
            firstName: '', 
            lastName: '', 
            email: '', 
            password: '',
            username: '', 
            shouldRedirect: false 
        }; 
    }
    
    public handleSubmit(e: React.FormEvent<HTMLButtonElement>): void { 
        e.preventDefault(); 
        const { firstName, lastName, username, email, password } = this.state;
        
        // this is where the register redux action is called and 
        // appropriate parameters passed in.
        this.props.register(firstName, lastName, username, email, password) 
        // once register is done, calls the completeRegistration action
        .then(() => { this.props.completeRegistration(); }); 
    }
    
    render() {
        return (
            <div>
            
            { the rest of the form }
            
            <button onClick={e => this.handleSubmit(e)}>
                Sign Up
            </button>
            
            </div>
        );
    }
}

// this is where you request keys from the Redux Store.
function mapStateToProps(state: Store) { 
    return { 
        visibleRegisterWindow: state.registerLoginWindow.visibleRegisterWindow 
    };
}

// connect function maps the Redux store and actions to the Register component
export default connect(
    mapStateToProps, 
    { register, completeRegistration } // shorthand for mapDispatchToProps
)(Register as any);
```

{% endcode %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://project-match.gitbook.io/project-match/untitled-1/untitled.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.