On Day 4 of my React Learning Journey, I focused on learning how to pass data to components using props and understanding how to define prop types and default props. Also, understanding how to manage state in class components and functional components using the `useState` hook. Here's a summary of what I learned: ### 1. Understanding Props #### What are Props? Props, short for "properties," are a mechanism for passing data from parent components to child components in React. They are read-only, meaning they cannot be modified by the child component. Props help create dynamic and reusable components by allowing you to pass different data to the same component. #### Pass props to the child component In the traditional way, props are passed to child components using the props object. Here's how it looks: ```jsx function Avatar(props) { return (

{props.name}

{props.email}

); } ``` In this example, the `Avatar` component receives props and accesses them using `props.propertyName`. #### Read props inside the child component To make the code cleaner and more readable, we can destructure the props object directly in the function signature: ```jsx function Avatar({ name, email, photo }) { return (

{name}

{email}

); } ``` By destructuring the props object, we can access the properties directly without using the `props` keyword. #### Forwarding Props with the JSX Spread Syntax Props can also be forwarded using the JSX spread syntax, which allows us to pass all the properties of an object as props to a component: ```jsx function Profile(props) { return ( <> ... ); } ``` In this example, all the properties of `props` are passed to the `Avatar` component using `{...props}`. #### Assigning Default Props We can define default values for props by using the `defaultProps` property on a component. This is useful when a prop might not be provided: ```jsx Avatar.defaultProps = { name: "Abby Ken", }; ``` OR ```jsx function Avatar({name="Abby Ken"}) { //... } ``` In this case, if no `name` prop is passed to the `Avatar` component, it will default to "Abby Ken." #### Defining Prop Types Using the `prop-types` library, you can specify the expected data types for props. This helps catch bugs and ensures that components receive the correct types of data: ```jsx import PropTypes from "prop-types"; Avatar.propTypes = { name: PropTypes.string.isRequired, email: PropTypes.string.isRequired, photo: PropTypes.string, }; ``` Here, `name` and `email` are required string props, while `photo` is an optional string prop.

### 2. Managing State #### Managing State in Class Components In class components, state is managed using a `constructor` and the `setState` method. Let's break down a simple counter component using class syntax: #### 1. Initializing State State is initialized in the `constructor` of the class component. You set the initial state value by assigning an object to `this.state`. ```jsx class CounterClass extends Component { constructor(props) { super(props); // Declare default state value this.state = { count: 0, }; } ... } ``` ##### 2. Changing State To update the state, use the `setState` method, which takes an object or a function that returns an object. This method schedules an update to the component's state and tells React to re-render the component with the updated state. ```jsx increment = () => { // Use setState to change state this.setState((prevState) => ({ count: prevState.count + 1, })); }; decrement = () => { this.setState((prevState) => ({ count: prevState.count - 1, })); }; ``` ##### 3. Using State in JSX You can use the state value in your JSX by referencing `this.state.propertyName`. ```jsx render() { return (

Count: {this.state.count}

); } ``` **Full Class Component Example:** ```jsx // src/CounterClass.js import React, { Component } from "react"; class CounterClass extends Component { constructor(props) { super(props); this.state = { count: 0, }; } increment = () => { this.setState((prevState) => ({ count: prevState.count + 1, })); }; decrement = () => { this.setState((prevState) => ({ count: prevState.count - 1, })); }; render() { return (

Count: {this.state.count}

); } } export default CounterClass; ``` #### useState Hook in Functional Components With functional components, state management is simplified using the `useState` hook. Here's how to break down the implementation of a functional counter component: ##### 1. Declaring State Use the `useState` hook to declare state in a functional component. This hook returns an array with two elements: the current state value and a function to update it. ```jsx const [count, setCount] = useState(0); ``` ##### 2. Changing State To change the state, call the state updater function returned by `useState`. ```jsx const increment = () => { setCount((prevCount) => prevCount + 1); }; const decrement = () => { setCount((prevCount) => prevCount - 1); }; ``` ##### 3. Using State in JSX Use the state variable directly in your JSX. ```jsx return (

Count: {count}

); ``` **Full Functional Component Example:** ```jsx // src/CounterFunction.js import React, { useState } from "react"; function CounterFunction() { const [count, setCount] = useState(0); const increment = () => { setCount((prevCount) => prevCount + 1); }; const decrement = () => { setCount((prevCount) => prevCount - 1); }; return (

Count: {count}

); } export default CounterFunction; ``` **Usage in App.js:** ```jsx // src/App.js import React from "react"; import CounterFunction from "./CounterFunction"; import CounterClass from "./CounterClass"; function App() { return (

); } export default App; ```

### Key Takeaways - **Props** are used to pass data from a parent component to a child component. They are read-only and can be forwarded using the JSX spread syntax. - **State** is managed in class components using `setState` and in functional components using the `useState` hook. - The `useState` hook returns a state variable and a function to update it, enabling easier state handling in functional components. Check out my [GitHub](https://github.com/mayuresh-surve/React-Journey/tree/main/Day%204) for code samples and projects. Connect with me on [LinkedIn](https://www.linkedin.com/in/mayuresh-surve/) to stay updated on my latest projects and insights!

reactstates

🚀 Day 4: Props and States 🚀

Join Our Newsletter. No Spam, Only the good stuff.