Unit 5
Unit 5
Installation
To use react-datepicker, you need to install it via npm or yarn:
function App() {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
dateFormat="yyyy/MM/dd"
/>
);
}
Key Features
Single Date Selection
✓ Allows the selection of a single date.
✓ Use the selected and onChange props to manage the date state.
Range Selection
✓ Allows users to select a date range.
✓ Use startDate, endDate, and the selectsRange prop:
<DatePicker
selected={startDate}
onChange={(dates) => {
const [start, end] = dates;
setStartDate(start);
setEndDate(end);
}}
startDate={startDate}
endDate={endDate}
selectsRange
/>
Time Selection
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
showTimeSelect
timeFormat="HH:mm"
dateFormat="MMMM d, yyyy h:mm aa"
/>
Custom Styling
Style the component by overriding CSS classes. You can modify the
appearance using CSS provided by the library or entirely customize it.
Data Between Parent and
Child Components
Introduction
There are several ways to lift state up in React, and the approach you
choose depends on the specific use case. In this section, we will
explore three common approaches:
1. Using Callbacks:
One way to lift state up in React is by using callbacks.
In this approach, we pass a function down the component tree
as a prop, and the child component calls the function when it
needs to update the state.
The function updates the state in the parent component, and
the updated state is passed down to the child components as
props.
//Parent.js
import React, { useState } from 'react';
import Child from './Child'
function Parent() {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
}
const handleDecrement = () => {
setCount(count - 1);
}
return (
<div>
<h1>Count: {count}</h1>
<Child onIncrement={handleIncrement}
onDecrement={ handleDecrement}
/>
</div>
);
}
export default Parent;
//Child.js
import React from 'react';
function Child(props) {
const { onIncrement, onDecrement } = props;
return (
<div>
<button onClick={onIncrement}>Increment</button>
<button onClick={onDecrement}>Decrement</button>
</div>
);
}
export default Child;
//App.js
import React from ‘react’
import Parent from ‘./Parent’
function App()
{
return(
<div>
<Parent />
</div>
}
export default App;
In this example, the Parent component has a state variable count that
represents the count value. The Parent component also has a
function handleIncrement that increments the count value.
The Parent component passes the handleIncrement function down to
the Child component as a prop called onIncrement.
The Child component receives the onIncrement prop and uses it as an
event handler for the button element. When the button is clicked,
the onIncrement function is called, which updates the state in the
`Parent component using the setCount function. This updates the
state in the Parent component, and the updated count value is
passed down to the Child component as a prop.
1. Using Context:
function Parent() {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
}
return (
<CountContext.Provider value={{ count, handleIncrement }}>
<div>
<h1>Count: {count}</h1>
<Child />
</div>
</CountContext.Provider>
);
}
function Child() {
const { count, handleIncrement } = useContext(CountContext);
return (
<div>
<button onClick={handleIncrement}>Increment</button>
<p>Count: {count}</p>
</div>
);
}
In this example, the Parent component creates a context object
called CountContext using the createContext function.
The Parent component has a state variable count that represents the
count value. The Parent component also has a
function handleIncrement that increments the count value.
The Parent component wraps the child components in
the CountContext.Provider component and provides
the count and handleIncrement values as the context value.
The Child component uses the useContext hook to access the context
and get the count and handleIncrement values. The Child component
uses the handleIncrement function as an event handler for
the button element, which updates the state in
the Parent component. The updated count value is passed down to
the Child component as a prop.
1. Using Redux:
function Counter() {
const count = useSelector(state => state.count);
return (
<span>{count}</span>
);
}
function Child() {
const dispatch = useDispatch();
const handleIncrement = () => {
dispatch(increment());
}
return (
<div>
<button onClick={handleIncrement}>Increment</button>
</div>
);
}
The Counter component uses the useSelector hook to access the state
from the store and get the count value. The count value is rendered as
a span element.
Conclusion:
CORS Workflow
Preflight Requests:
Before making certain types of cross-origin requests (e.g., PUT, DELETE, or
requests with custom headers), the browser sends a preflight request using
the HTTP OPTIONS method.
The preflight request checks with the server to see if the actual request is
allowed.
If allowed, the actual request follows; otherwise, the browser blocks the
request.
Request Headers:
Origin: Indicates the origin of the request.
Access-Control-Request-Method: Specifies the HTTP method being used in
the actual request (for preflight).
Access-Control-Request-Headers: Lists the headers the actual request
intends to use.
Response Headers:
Access-Control-Allow-Origin: Specifies which origins are allowed access. (*
allows all origins.)
Access-Control-Allow-Methods: Lists allowed HTTP methods (e.g., GET,
POST).
Access-Control-Allow-Headers: Lists allowed headers in the request.
Access-Control-Allow-Credentials: Indicates if credentials (e.g., cookies, HTTP
authentication) are allowed.
Access-Control-Expose-Headers: Specifies which headers can be accessed by
the client.
Types of Requests
Simple Requests:
Requests that meet specific criteria:
HTTP methods: GET, POST, HEAD.
No custom headers (only standard headers like Content-Type).
If the request qualifies as simple, the browser skips the preflight request.
Non-Simple Requests:
Reuests that don’t meet the criteria for simple requests.
Require a preflight request to verify permissions.
find all movies that have a synopsis that contains the word "Boys" or
"Mysteries"
db.movie.find({$text:{$search:"Boys Mysteries"}}).pretty()
find all movies that have a synopsis that contains the word " Inspector " and
"Mysteries"
find all movies that have a synopsis that contains the word "Boys" and not the
word "Mysteries"
db.movie.find({$text:{$search:"Boys -Mysteries"}}).pretty()
MapReduce:
Two basic elements
Mapper: Mapper maps key with its value<k1,v1>→list(<k2,v2>)
Reducer: Reducer reduces the values associated with the key.
<k2,list(v2)>→<k3,v3>
Example
Hadoop is good <#001, Hadoop is good>
Hadoop is bad <#002, Hadoop is bad>
Hadoop is very good <#003, Hadoop is very good>
Split: hadoop, is, good, hadoop, is, bad, hadoop, is, very, good
• write a MapReduce algorithm to find no.of
movies released in each year
• write a MapReduce algorithm to find top rating
in each year
• write a MapReduce algorithm to find average
rating in each year
• write a MapReduce algorithm to find no.of
citations for each patent
• write a MapReduce algorithm to find references
of each patent
MongoDB-aggregation
• In MongoDB, aggregation operation collects
values from various documents and groups
them together and then performs different
types of operations on that grouped data like
sum, average, minimum, maximum, etc to
return a computed result.
• The aggregate() Method
For the aggregation in MongoDB, we can use
aggregate() method.
Aggregation pipeline
• Aggregation is a way of processing a large number of
documents in a collection by means of passing them
through different stages. The stages make up what is
known as a pipeline.