React Props vs State: Differences, Examples & Guide

Props vs State

What is the Difference?

This is the single most common React interview question, and the concept beginners most often confuse.

How to Decide Which to Use

Ask: does this component need to change this value itself?

• Yes → state
• No, it just displays what it is given → props

Lifting State Up

What if two sibling components need the same data? Move the state to their closest common parent and pass it down as props. This is called lifting state up.

jsx

function Dashboard() {
  const [selectedCourse, setSelectedCourse] = useState(null);

  return (
    <div>
      <CourseList onSelect={setSelectedCourse} />
      <CourseDetails course={selectedCourse} />
    </div>
  );
}

The parent owns the state. CourseList receives a function to change it; CourseDetails receives the value to display. This is how a child communicates upward in React the parent passes down a function, and the child calls it.

Mini-Project: Student Progress Dashboard

Build a dashboard that combines everything in Modules 4 and 5.

What you will build

A page showing a list of courses with progress tracking and a search box.

Requirements

1. Store an array of courses in state in a Dashboard component. Each course needs id, title, lessons, completed.
2. Render each course using a CourseCard component that receives its data as props.
3. Each card shows a progress bar calculated from completed / lessons.
4. Each card has a "Complete a lesson" button that increases completed by one, stopping at lessons.
5. A search input at the top filters courses by title.
6. Show a summary at the top: total courses, and how many are 100% complete.
7. If the search matches nothing, show an empty-state message.

Concepts used: components, props, children (optional, for a card wrapper), useState, event handling, immutable array updates, conditional rendering, list rendering with keys.

Expected outcome: a working dashboard where clicking a button on one card updates only that card's progress, and the summary count updates automatically.