React Hooks

React hooks are functions that let you use state and other React features in
functional components. They were introduced in React version 16.8 and are
designed to make it easier to manage state and side effects in React
applications.

useState is a hook that allows you to manage state in a functional

component. It returns an array with two values: the current state value and a
function to update the state value. useState is a React Hook that lets you add a state
variable to your component.

const [state, setState] = useState(initialState)

import React, { useState } from 'react';

function Counter() {

const [count, setCount] = useState(0);

return (

<div>

<p>Count: {count}</p>

<button onClick={() => setCount(count + 1)}>Increment</button>

</div>

);

In this example, we're using the useState hook to manage the count state
variable. We start with an initial value of 0 by passing it as an argument to
useState. The setCount function is used to update the count value whenever the
user clicks the "Increment" button.
 We can do some more examples

How about you practice it here:(30 mins)

Example 1:Time App

https://codesandbox.io/s/usestate-hook-practice-ov42ti?file=/src/index.js

Example 2:Restaurant App

Pre-start

● Please open the Restaurant react App folder and install node modules
by giving command in terminal npm install.
● Once done to run the app give command npm start.
● We have to create a Restaurant App like this:

Output

● Task 1 -Read data from menuApi and render on MenuCard

dynamically-same as we done before in emojipedia app
● Task 2 -Use States to update the MenuCard and by using map function
create different categories
● Task 3 -Create Navbar and filter them categorically as seen in output.

Some of tasks need help and will do it together like task 3.

Extra Resources:

https://www.w3schools.com/react/react_es6_destructuring.asp

https://courses.webdevsimplified.com/view/courses/react-hooks-simplified

https://beta.reactjs.org/reference/react/useState