5. Props and Data Flow in React

Level: BeginnerDuration: 16m

What Are Props?

Props (short for properties) are how we send data from one component to another in React. Props are read-only, which means a component receiving props can't change them directly.

jsx

function Welcome(props) {
  return <h2>Hello, {props.name}!</h2>
}

function App() {
  return <Welcome name="Chrise" />
}

Passing Multiple Props

You can pass as many props as you like to a component. They work just like function parameters.

jsx

function UserCard(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>Age: {props.age}</p>
    </div>
  )
}

function App() {
  return <UserCard name="Sarah" age={25} />
}

Destructuring Props

Instead of writing props.name or props.age everywhere, we can clean up our code using destructuring.

jsx

function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
    </div>
  )
}

Default Props

If a prop isn't provided, we can give it a default value so the component still works.

jsx

function Button({ text = "Click Me" }) {
  return <button>{text}</button>
}

function App() {
  return (
    <>
      <Button text="Submit" />
      <Button />
    </>
  )
}

One-Way Data Flow

In React, data flows in one direction — from parent to child using props. This helps keep your UI predictable.

text

App → sends data → Child Component → displays it

Props Can Pass Anything

Strings – `<Card title="Hello" />`
Numbers – `<Price amount={39.99} />`
Arrays – `<List items={[1,2,3]} />`
Objects – `<Profile user={{name: 'Ada'}} />`
Functions – `<Button onClick={handleClick} />`

Mini Project Step

Inside your `components` folder, create a new component called `FeatureCard.jsx`. It should accept `title` and `description` as props and display them nicely. Import and use three copies of FeatureCard in `App.jsx`, each with different content.

jsx

// FeatureCard.jsx
function FeatureCard({ title, description }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  )
}
export default FeatureCard;

// App.jsx
import FeatureCard from './components/FeatureCard'

function App() {
  return (
    <div>
      <FeatureCard title="Fast Learning" description="Practice-based lessons." />
      <FeatureCard title="Modern Tools" description="We use Vite + React." />
      <FeatureCard title="Clean Code" description="Reusable components everywhere." />
    </div>
  )
}
export default App;