Interactive React

Topics Covered

Slides: slides.com/joelross/info340wi26-interactive-react

React Events

• Event listeners attach to HTML elements using special props like onClick, onChange, onSubmit
• Pass a callback function, don't call it: onClick={handleClick} not onClick={handleClick()}
• Callback receives the DOM event object as a parameter
• Event listeners only attach to HTML elements, not custom components

State with useState()

State tracks internal component data that changes over time:

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
};

• useState(initialValue) returns [stateVar, setterFunction]
• Calling the setter triggers a re-render of the component
• State changes are asynchronous — console.log in handlers shows old values
• Multiple state variables work independently within a single component
• Don't store values in state that can be derived from other state or props

State vs Props

• Props: Passed from parent, unchanging from the component's perspective
• State: Changes over time, usually through user interaction
• If data doesn't change, it's a prop. If it changes over time, it's state

Controlled Forms

Form inputs store their data in state, making React the source of truth:

const [inputValue, setInputValue] = useState('');

const handleChange = (event) => {
  setInputValue(event.target.value);
};

return <input value={inputValue} onChange={handleChange} />;

• Controlled inputs require both value and onChange attributes
• React state is the single source of truth for the input's value
• Every keystroke triggers onChange, updating state and re-rendering

Lifting State Up

• When multiple components need the same data, lift state up to their closest common parent
• Parent owns the state and passes it down as props
• Child components receive callback functions as props to modify parent state
• Don't pass state setters directly — wrap them in handler functions

// Parent component
function App() {
  const [items, setItems] = useState([]);

  const addItem = (newItem) => {
    setItems([...items, newItem]);
  };

  return (
    <>
      <AddForm onAdd={addItem} />
      <ItemList items={items} />
    </>
  );
}

// Child component
function AddForm({ onAdd }) {
  const handleSubmit = (event) => {
    event.preventDefault();
    onAdd(newItemData);
  };
  // ...
}

Project Draft 2

• Refactor Draft 1 into a React application
• Render all content through components with props
• Implement routing for page navigation
• Add one interactive feature with event handling and state
• Deploy to Firebase hosting