React Components Objectives

Providing Default Values for Props

Props allow data to be passed into React components. However, if no value is provided, a component might break. To prevent this, you can set default values for props.

Example

function Greeting({ name = "Guest" }) {
  return <h1>Hello, {name}!</h1>;
}

If the name prop is not provided, the component will default to "Guest".

Using defaultProps

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Greeting.defaultProps = {
  name: "Guest"
};

Setting default values ensures that components function correctly even when missing certain props.

Passing Props into a Component

Props are how data flows from parent to child components in React. They allow dynamic customization of components.

Example

function Welcome({ user }) {
  return <h2>Welcome, {user}!</h2>;
}

function App() {
  return <Welcome user="Alice" />;
}

Here, the Welcome component receives the user prop and displays it dynamically.

Debugging Component Rendering

Sometimes, a component may render unexpectedly. React provides debugging tools to help track renders.

Using console.log()

function Profile({ username }) {
  console.log("Profile component is rendering");
  return <h3>User: {username}</h3>;
}

Adding a console.log statement helps track when and how often a component re-renders.

Using React DevTools

React DevTools allows you to inspect component props and state in real-time. This tool helps identify unnecessary renders and performance bottlenecks.

Destructuring Props

Destructuring props makes code cleaner and easier to read.

Without Destructuring

function UserInfo(props) {
  return <p>Name: {props.name}, Age: {props.age}</p>;
}

With Destructuring

function UserInfo({ name, age }) {
  return <p>Name: {name}, Age: {age}</p>;
}

Destructuring improves readability and reduces repetitive code.

Wrapping Up

In this tutorial, you learned:

• How to provide default values for props.
• How to pass props into components.
• How to debug component rendering using logs and React DevTools.
• How to destructure props for cleaner code.

By understanding these core concepts, you can build efficient, reusable, and maintainable React applications.