React Props

Pass data into components.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

Props (properties) pass data from a parent component to a child, like HTML attributes.

Pass: <Course title="Python" lessons={36} />
Read with destructuring: function Course({ title, lessons }) { ... }
Props are read-only: a component must not change its own props.
Default values: function Badge({ color = "blue" })
children is whatever you put between the opening and closing tags.

Key Takeaways: React Props

Mastering React Props helps you write clean and reliable React code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

React Props Code Example

React

<div id="root"></div>
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.25.6/babel.min.js"></script>

<script type="text/babel">
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;
function Course({ title, lessons, color = "#2563EB" }) {
  return (
    <div style={{ borderLeft: `6px solid ${color}`, padding: "8px 12px", margin: "8px 0", background: "#F8FAFC" }}>
      <strong>{title}</strong> — {lessons} lessons
    </div>
  );
}

function Panel({ children }) {
  return <section style={{ border: "2px dashed #CBD5E1", padding: 10 }}>{children}</section>;
}

function App() {
  return (
    <Panel>
      <Course title="HTML" lessons={41} color="#E34F26" />
      <Course title="Python" lessons={36} color="#14B8A6" />
      <Course title="React" lessons={15} />
    </Panel>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>

Free sign-in required · Google login available

React Props Practice Exercises

Check what you learned in “React Props”.

/ 3 solved

Fill in the blank

Read the title prop with destructuring.

function Course({  }) {
  return <h3>{title}</h3>;
}

✓ Correct! Not quite. Try again.

Multiple choice

Can a component change its own props?

No, props are read-only Yes, always Only strings Only in class components

✓ Correct! Not quite. Try again.

Code challenge

Make Greeting accept a name prop and render "Hi, {name}" in a <p>. Render <Greeting name="Ali" />.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

React Props

💡 Key Takeaways: React Props

React Props Code Example

React Props Practice Exercises

Key Takeaways: React Props