Props

1. Introduction to Props

Props (short for properties) are a fundamental concept in React that allows components to receive data from their parent components. Props are read-only and help make components reusable and dynamic by allowing them to be customized with different data.

2. Passing and Using Props

Props are passed to components using a syntax similar to HTML attributes. Inside the component, props are accessed using props.

Example:

function Post(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </article>
  );
}

In this example, the Post component receives title and content as props and displays them.

3. Using Props in Practice

Let's expand our blog example to include an Author component that displays the author's name for each post. We'll pass the author's name as a prop.

Example:

1. Author Component

   // src/components/Author.js
   import React from 'react';
   
   function Author(props) {
     return <p>Written by: {props.name}</p>;
   }
   
   export default Author;

2. Updating Post Component to Include Author

   // src/components/Post.js
   import React from 'react';
   import Author from './Author';
   
   function Post(props) {
     return (
       <article>
         <h2>{props.title}</h2>
         <p>{props.content}</p>
         <Author name={props.author} />
       </article>
     );
   }
   
   export default Post;

3. Passing Author Prop in PostList

   // src/components/PostList.js
   import React from 'react';
   import Post from './Post';
   
   function PostList(props) {
     return (
       <div>
         {props.posts.map((post) => (
           <Post key={post.id} title={post.title} content={post.content} author={post.author} />
         ))}
       </div>
     );
   }
   
   export default PostList;

4. Adding Author to Posts in App Component

   // src/App.js
   import React, { useState } from 'react';
   import Header from './components/Header';
   import PostList from './components/PostList';
   import Footer from './components/Footer';
   
   function App() {
     const [posts, setPosts] = useState([
       { id: 1, title: 'First Post', content: 'This is my first post!', author: 'Alice' },
       { id: 2, title: 'Second Post', content: 'This is my second post!', author: 'Bob' },
     ]);
   
     return (
       <div>
         <Header />
         <PostList posts={posts} />
         <Footer />
       </div>
     );
   }
   
   export default App;

In this example:

• We created an Author component that takes a name prop and displays the author's name.

• We updated the Post component to include the Author component and pass the author's name as a prop.

• We passed the author prop from the PostList component to the Post component.

• We added the author's name to each post object in the App component's state.

4. Default Props and Prop Types

React provides ways to define default props and validate prop types to ensure that components receive the correct data.

Default Props: Default props are used to set default values for props if they are not provided.

Example:

function Post(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
      <Author name={props.author} />
    </article>
  );
}

Post.defaultProps = {
  author: 'Unknown',
};

In this example, if the author prop is not provided, it will default to 'Unknown'.

Prop Types: Prop types are used to specify the expected data types for props. This helps catch bugs and ensure that components receive the correct data.

Example:

import PropTypes from 'prop-types';

function Post(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
      <Author name={props.author} />
    </article>
  );
}

Post.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
  author: PropTypes.string,
};

Post.defaultProps = {
  author: 'Unknown',
};

In this example:

• We used PropTypes to specify that title and content should be strings and are required.

• We specified that author should be a string and provided a default value of 'Unknown'.

Props are a fundamental concept in React that allows components to receive data from their parent components. By using props, you can make components reusable and dynamic, customizing them with different data. Understanding how to pass and use props, set default props, and validate prop types helps create robust and maintainable React applications. This foundational knowledge will enable you to build more complex and interactive user interfaces.

---

Help us improve the content 🤩

You can leave comments here.