Login - Jit4All

Send information into a component so one component can show different content.

How does one React component become reusable with different data?

Props are values passed into a React component. They let the same component display different text, numbers, labels, links, or settings without rewriting the component.

The first lecture created one fixed component.

But a real site needs many lesson cards, product cards, buttons, and messages with different content.

Props solve that problem.

A prop is information passed from a parent component into a child component.

The component owns the layout. The props provide the content.

A reusable component with props

function LessonCard(props) {
   return (
      <article className="lesson-card">
         <h2>{props.title}</h2>
         <p>{props.description}</p>
         <button>{props.buttonText}</button>
      </article>
   );
}

function App() {
   return (
      <main>
         <LessonCard
            title="Components"
            description="Build interfaces from reusable pieces."
            buttonText="Start lesson"
         />

         <LessonCard
            title="Props"
            description="Send data into a component."
            buttonText="Continue"
         />
      </main>
   );
}

props is the object of values passed into the component.

props.title reads the title prop.

Curly braces put JavaScript values into JSX.

The same LessonCard component is used twice.

Each use sends different prop values, so each card displays different content.

Props let one component display many different records.

Props move information from a parent component into a child component.

The component controls structure while props supply the content.

React apps constantly pass data through props.

Copying components for every lesson

function ComponentsCard() {
   return <h2>Components</h2>;
}

function PropsCard() {
   return <h2>Props</h2>;
}

One component, different props

function LessonCard(props) {
   return <h2>{props.title}</h2>;
}

<LessonCard title="Components" />
<LessonCard title="Props" />

Ask ChatGPT: "Which parts of this component should be props instead of hard-coded text?" Then identify the repeated pattern yourself.

Add a props parameter to LessonCard.

Display props.title inside a heading.

Display props.description inside a paragraph.

Use the component twice with different prop values.

Explain which component is the parent and which component is the child.

Hard-coding content that should come from props.

Changing the child component instead of passing different prop values.

Forgetting curly braces when displaying JavaScript values in JSX.

Misspelling a prop name in one place.

Trying to change props inside the child component.

Use props to pass data into a React component so one reusable component can display different content.