REACT UNIT 3 SOL :

1) Differentiate between React props and state. Provide an example

scenario for each.

**React Props:**

Props (short for properties) are read-only data that are passed from
a parent component to a child component. They allow parent
components to communicate with their children by passing data or
behavior down the component tree. Props are immutable and
cannot be modified by the child component.

**Example Scenario for Props:**

Consider a parent component `Parent` that renders a child

component `Child`. The parent component passes a prop named
`message` to the child component, which the child component
then displays.

```jsx
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
return (
<div>
<ChildComponent message="Hello, child!" />
</div>
);
}

export default ParentComponent;

```

```jsx
// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
return (
<div>
<p>{props.message}</p>
</div>
);
}
export default ChildComponent;
```

In this scenario, the `ParentComponent` passes the `message`

prop to the `ChildComponent`. The `ChildComponent` then
receives and displays the message received from its parent.

**React State:**

State is a built-in feature of React components that represents the

internal data of a component. Unlike props, which are passed down
from parent to child, state is managed within the component itself
and can be modified using the `setState` method provided by
React. State is mutable and can be updated over time, causing the
component to re-render with the updated state.

**Example Scenario for State:**

Consider a simple counter component that keeps track of a count

value internally and allows users to increment it by clicking a
button.

```jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);

const increment = () => {

setCount(count + 1);
};

return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}

export default Counter;

```

In this scenario, the `Counter` component uses the `useState`

hook to define a state variable `count` initialized to `0`. When the
user clicks the "Increment" button, the `increment` function is
called, which updates the `count` state by incrementing it. The
updated `count` value is then displayed in the component, causing
it to re-render with the new state.

**Summary:**

- **Props:** Used for passing data from parent to child

components. Props are immutable and read-only within the child
component.
- **State:** Represents the internal data of a component. State is
mutable and managed internally by the component using the
`useState` hook or `this.state` in class components.

2) Discuss the role of props and states in React components,

emphasizing when to use each.

In React components, both props and state play important roles in

managing data and rendering UI. Understanding when to use each is
crucial for building well-structured and maintainable React
applications.

**Props:**

Props (short for properties) are a way to pass data from parent
components to child components in React. They are immutable and
read-only within the child component, meaning that the child
component cannot modify the props it receives from its parent.
**When to use props:**

1. **Communication between components:** Props are primarily

used for communication between parent and child components.
They allow parent components to pass data, configuration, or
behavior down to their child components.
2. **Reusability:** Props promote component reusability by
allowing the same component to be rendered with different data or
configurations in different parts of the application.
3. **Customization:** Props can be used to customize the behavior
or appearance of child components based on the needs of the
parent component or the context in which they are rendered.

**State:**

State represents the internal state of a component and is used for

managing dynamic data and user interactions within the
component. Unlike props, which are passed from parent to child,
state is local and specific to each component instance. State can
be modified throughout the lifecycle of a component, causing the
component to re-render with the updated state.

**When to use state:**

1. **Dynamic data:** Use state to manage data that changes over
time, such as user input, API responses, or application state.
2. **User interactions:** Use state to manage UI elements that
respond to user interactions, such as form inputs, toggles, or
dropdown selections.
3. **Component-specific data:** Use state to store data that is
relevant only to a specific component and does not need to be
shared with other components in the application.

**Guidelines for using props and state:**

1. **Single source of truth:** Follow the principle of having a single

source of truth for your data. If the data is used by multiple
components or needs to be shared between them, consider
managing it in the parent component's state and passing it down as
props to child components.
2. **Immutability:** Treat props as immutable and avoid modifying
them directly within the child component. If a child component
needs to modify the data it receives via props, it should do so by
triggering callbacks passed down from the parent component.
3. **Minimize stateful components:** Keep stateful components to
a minimum and prefer using stateless functional components
whenever possible. This helps in keeping the application's state
manageable and makes it easier to reason about the behavior of
different components.
In summary, props are used for communication between
components and customization of child components, while state is
used for managing dynamic data and user interactions within a
component. Understanding when to use each helps in designing
clear and maintainable React components and applications.

3) Explain how to update state in a React component and why it's

important in a dynamic application.

In React, state represents the internal data of a component, and

updating state is a fundamental concept for building dynamic and
interactive applications. React components can have state, and
changes to this state trigger re-renders, allowing the UI to reflect the
updated state.

**Updating State in a React Component:**

React provides a `useState` hook (in functional components) or a

`this.setState()` method (in class components) to update
component state.

**Functional Components (using `useState` hook):**

```jsx
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);

const increment = () => {

setCount(count + 1); // Updates the count state
};

return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
```

**Class Components (using `this.setState()`):**

```jsx
import React, { Component } from 'react';

class MyComponent extends Component {

 constructor(props) {
super(props);
this.state = {
count: 0
};
}

increment = () => {
this.setState({ count: this.state.count + 1 }); // Updates the count
state
};

render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
```
**Why Updating State is Important in a Dynamic Application:**

1. **UI Updates:** In a dynamic application, user interactions, data

fetching, or other events may trigger changes to the application's
state. Updating state ensures that the UI reflects these changes and
remains in sync with the underlying data.

2. **Interactivity:** Updating state enables interactive user

interfaces by allowing components to respond to user input, such
as clicks, keystrokes, or form submissions. For example, updating
state in response to a button click can increment a counter or toggle
the visibility of a component.

3. **Data Management:** State management is crucial for

managing dynamic data within a component. For instance, a
component may fetch data from an API and update its state with the
received data. Subsequent updates to the data can be reflected by
updating the component's state accordingly.

4. **Component Reusability:** State enables components to

encapsulate their own data and behavior, making them reusable
across different parts of the application. By updating state,
components can maintain their internal state while still being
reusable in various contexts.
5. **Performance Optimization:** Updating state triggers re-renders
of components, but React optimizes this process by batching
updates and only updating the DOM when necessary. This helps in
maintaining performance and responsiveness in dynamic
applications.

In summary, updating state in a React component is essential for

building dynamic and interactive applications. It ensures that the UI
remains synchronized with the underlying data, enables
interactivity, facilitates data management, promotes component
reusability, and helps in optimizing application performance.

4) Distinguish between functional and class components in React.

Provide use cases for each.

In React, there are two primary types of components: functional

components and class components. While both types serve the
same purpose of rendering UI elements, they differ in their syntax,
lifecycle methods, and usage of state and props.

**Functional Components:**

Functional components are JavaScript functions that accept props

as arguments and return JSX to describe what should be rendered to
the DOM. They are simple and straightforward, focusing only on
presenting UI elements based on the props they receive.
**Use Cases for Functional Components:**

1. **Presentational Components:** Functional components are

commonly used for presentational or UI-centric components that
don't have internal state or complex logic. They are ideal for
components that only render UI elements based on the props they
receive.

2. **Reusable Components:** Functional components are easier to

understand and maintain, making them suitable for building
reusable components that can be shared across different parts of
the application.

3. **Hooks:** Functional components are used with React hooks,

such as useState, useEffect, useContext, etc., which provide
additional features and functionality without the need for class
components.

**Example of a Functional Component:**

```jsx
import React from 'react';

function FunctionalComponent(props) {
return (
 <div>
<h1>Hello, {props.name}!</h1>
</div>
);
}

export default FunctionalComponent;

```

**Class Components:**

Class components are JavaScript classes that extend

React.Component and have a render() method. They have a more
traditional syntax and support the use of lifecycle methods, state,
and component-level methods.

**Use Cases for Class Components:**

1. **Stateful Components:** Class components are used for

building stateful components that need to manage internal state or
have complex lifecycle methods. They provide a way to manage
state using this.state and setState().
2. **Lifecycle Methods:** Class components support lifecycle
methods, such as componentDidMount, componentDidUpdate,
componentWillUnmount, etc., which allow developers to perform
actions at specific points in a component's lifecycle.

3. **Legacy Codebases:** Class components are commonly used

in legacy codebases or in projects where functional components
with hooks are not yet adopted or supported.

**Example of a Class Component:**

```jsx
import React, { Component } from 'react';

class ClassComponent extends Component {

constructor(props) {
super(props);
this.state = {
count: 0
};
}

incrementCount = () => {
 this.setState({ count: this.state.count + 1 });
};

render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}

export default ClassComponent;

```

**Summary:**

- **Functional Components:** Simple, lightweight components that

accept props and return JSX. Suitable for presentational
components and reusable UI elements.
- **Class Components:** JavaScript classes that extend
React.Component and support state, lifecycle methods, and
component-level methods. Used for building stateful components
and working with lifecycle methods in legacy codebases or when
hooks are not available.

In modern React development, functional components with hooks

are preferred over class components due to their simplicity,
readability, and improved performance. However, class
components are still relevant, especially in legacy codebases or
projects with complex state management and lifecycle
requirements.

5) Describe the process of passing data between parent and child

components in React.

Passing data between parent and child components in React

involves using props to pass data from the parent to the child
component. This allows parent components to communicate with
their children by passing data or behavior down the component
tree.

Here's the process of passing data between parent and child

components:

1. **Define the Parent Component:**

 First, define the parent component that will pass data to its child
component. This parent component will render the child
component and pass data to it via props.

2. **Define the Child Component:**

Next, define the child component that will receive the data from its
parent component through props. The child component will use the
props passed down from its parent to render its UI or perform any
necessary actions.

3. **Pass Data from Parent to Child:**

In the parent component, pass the data to the child component by
adding attributes to the child component's JSX tag. These attributes
will serve as props and will be accessible within the child
component.

4. **Access Data in Child Component:**

In the child component, access the data passed from the parent
component by accessing props. Use props to render UI elements or
perform actions based on the data received from the parent
component.

**Example:**

Parent Component:
```jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
const data = "Hello from Parent";

return (
<div>
<ChildComponent message={data} />
</div>
);
}

export default ParentComponent;

```

Child Component:
```jsx
import React from 'react';

function ChildComponent(props) {
 return (
<div>
<p>Message from Parent: {props.message}</p>
</div>
);
}

export default ChildComponent;

```

In this example, the `ParentComponent` passes the `data`

variable to the `ChildComponent` as a prop named `message`.
The `ChildComponent` receives the `message` prop and renders
it within a paragraph element.

By following this process, you can effectively pass data between

parent and child components in React, allowing for flexible and
dynamic UI development.

6) Build a simple card component and use it in a card list.

Sure, here's an example of a simple card component and a card list

in React:

**Card Component:**
```jsx
import React from 'react';

function Card({ title, content }) {

return (
<div className="card">
<h2>{title}</h2>
<p>{content}</p>
</div>
);
}

export default Card;

```

**Card List Component:**

```jsx
import React from 'react';
import Card from './Card';
function CardList() {
const cardsData = [
{ id: 1, title: "Card 1", content: "Content for card 1" },
{ id: 2, title: "Card 2", content: "Content for card 2" },
{ id: 3, title: "Card 3", content: "Content for card 3" }
];

return (
<div className="card-list">
{cardsData.map(card => (
<Card key={card.id} title={card.title} content={card.content} />
))}
</div>
);
}

export default CardList;

```

**Usage:**
In your main component (or App component), you can use the
`CardList` component like this:

```jsx
import React from 'react';
import CardList from './CardList';

function App() {
return (
<div className="app">
<h1>Card List Example</h1>
<CardList />
</div>
);
}

export default App;

```

This code will render a list of cards with titles and content specified
in the `cardsData` array in the `CardList` component. Each card is
rendered using the `Card` component, which receives the title and
content as props.