React - lesson 6 | HackIndia Skills

React - lesson 6 | HackIndia Skills | HackIndia

Example

Before and after

Here, SearchBox should not own the search text if IdeaList also needs it. App is the closest common parent, so App owns searchText.

Notice the direction. Data goes down. Events go up through handler props.

import { useState } from 'react';

const ideas = [
  { id: 'upi-split', title: 'UPI bill splitter' },
  { id: 'mess-menu', title: 'Hostel mess menu tracker' },
  { id: 'notes-share', title: 'Class notes exchange' },
];

export default function App() {
  const [searchText, setSearchText] = useState('');

  const visibleIdeas = ideas.filter((idea) =>
    idea.title.toLowerCase().includes(searchText.toLowerCase())
  );

  return (
    <main>
      <h1>Hackathon ideas</h1>
      <SearchBox value={searchText} onChange={setSearchText} />
      <IdeaList ideas={visibleIdeas} />
    </main>
  );
}

function SearchBox({ value, onChange }) {
  return (
    <label>
      Search ideas
      <input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder="Try UPI"
      />
    </label>
  );
}

function IdeaList({ ideas }) {
  return (
    <ul>
      {ideas.map((idea) => (
        <li key={idea.id}>{idea.title}</li>
      ))}
    </ul>
  );
}

Lift state between components

One owner

Why lift state

Choose the parent

Before and after

Do not sync copies

Name handlers clearly

Do this now

Quick check