# Basic Interactivity in React

One of the great features of frontend frameworks is how they support interactivity.

While they simpify and standardize some of the syntax we need to use to give users reliable and fast interactions (while saving ourselves some lines of code), there are some rules that we will need to follow.

The first thing that you need to do **in nextjs** is add `use client` to the top of any file that user interactivity and state.

## Event Handling in React

- [Docs responding to events](https://react.dev/learn/responding-to-events)
- [List of react events you can use](https://www.geeksforgeeks.org/reactjs/react-events-reference/)
- [Client vs Server Components in NextJs](https://nextjs.org/learn/react-foundations/server-and-client-components)
In vanilla html + js, you'll often use `addEventListener("event-name", fn)` wherein you'll specify the type of event in "event-name".

However in React and NextJS, you're going to use built in event handlers (some look the same as vanilla ones but they're different).

For Example:

export default function Button() {
  const alertEvent = () => alert("Clicked!!")
  return(
    <button onClick={alertEvent}>Click me!</button>
  )
}

Alternatively, you can also apply the logic inline.

export default function Button() {
  return(
    <button onClick={() => alert("Clicked!!")}>Click me!</button>
  )
}

This also works for when you have arguments passed to a function

export default function Button() {
  const alertEvent = (txt) => alert(txt)
  return(
    <button onClick={() => alertEvent("Show msg")}>Click me!</button>
  )
}

However this is going to have limits. For instance, what happens when:
- you have a button that is going to change information that is rendered?
- user inputs information into a form?
- render information conditionally
- toggle something in the page or general UI?

## State Management

- [ React Docs useState](https://react.dev/reference/react/useState)
- Destructure from useState. render the information as the first element and update using the second
- The second element in the destructured array should be named with the set prefix

"use client"
import { useState } from "react";
export default function Page() {
  const [counter, setCounter] = useState(0)
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={() setCounter(() => setCounter((num) => num + 5}>Add 5</button> 
    </div> 
  )
}

However inline event handlers with state management tend to get unweildly fast, so it tends to be better to create controlled wrapper functions.

"use client";
import { useState } from "react"
export default function Page() {
  const [count, setCount] = useState(0)
  const addToCount = () =>  setCount((num) => num + 1)
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={addToCount}>Add 1</button>
    </div>
  )
}

## Javascript Background Topics
The following features and details about javascript will help you implement the features discussed above

- Array Destructuring
- Function Expressions vs Function Declarations
- Higher order functions
- Arrow functions