Scribd
Upload
47 views5 pages

Exercise 10 - React Hook - UseState

Uploaded by

minhnguyen301101
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
47 views5 pages

Exercise 10 - React Hook - UseState

Uploaded by

minhnguyen301101
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

React Hook – State Hook

Objectives and Outcomes


In this exercise we understand about how to use React Hook: State Hook At the end of this exercise
you will learn about:

 Using the React Hook such as: State Hook in your app.

Update your data for the info key


{
id: 1,
name: 'Cristiano Ronaldo',
club: 'Manchester United',
img:'assets/images/cr.jpg',
info: 'Cristiano Ronaldo dos Santos Aveiro was born 5 February 1985 is
a Portuguese professional footballer who plays as a forward for Premier
League club Manchester United and captains the Portugal national team.'
},
{
id: 2,
name: 'Kante',
club: 'Chelsea',
img:'assets/images/kante.jpg',
info:'N Golo Kanté (born 29 March 1991) is a French professional
footballer who plays as a central midfielder for Premier League club Chelsea
and the France national team. Kanté is widely praised for his work rate and
defensive acumen.'
},
{
id: 3,
name: 'Messi',
club: 'PSG',
img:'assets/images/messi.jpg',
info: 'Lionel Andrés Messi born 24 June 1987, also known as Leo Messi,
is an Argentine professional footballer who plays as a forward for Ligue 1
club Paris Saint-Germain and captains the Argentina national team. Widely
regarded as one of the greatest players of all time, Messi has won a record
seven Ballon d Or awards, a record six European Golden Shoes, and in 2020
was named to the Ballon d Or Dream Team. Until leaving the club in 2021.'
},
{
id: 4,
name: 'Neymar',
club: 'PSG',
img:'assets/images/neymar.jpg',

1
info:'Neymar da Silva Santos Júnior (born 5 February 1992), known as
Neymar, is a Brazilian professional footballer who plays as a forward for
Ligue 1 club Paris Saint-Germain and the Brazil national team. He is
considered a versatile player, being able to play as either a central
striker, second striker, winger or occasionally as an attacking midfielder.
A prolific goalscorer and renowned playmaker, he is regarded as one of the
best players in the world. Neymar has scored at least 100 goals for three
different clubs, making him one of three players to achieve this'
},
{
id: 5,
name: 'Kane',
club: 'Tottenham',
img:'assets/images/kane.jpg',
info: 'Harry Edward Kane MBE (born 28 July 1993) is an English
professional footballer who plays as a striker for Premier League club
Tottenham Hotspur and captains the England national team. Regarded as one of
the best strikers in the world, Kane is known for his prolific goalscoring
record and ability to link play.[4][5] He ranks as Tottenham second-highest
all-time top goalscorer and the third-highest Premier League all-time top
goalscorer'
},
{
id: 6,
name: 'Haaland',
club: 'Manchester City',
img: 'assets/images/haaland.jpg',
info: 'Erling Braut Haaland (né Håland; born 21 July 2000) is a
Norwegian professional footballer who plays as a striker for Premier League
club Manchester City and the Norway national team. Considered one of the
best players in the world, he is known for his athleticism, speed and
finishing.'
}

Add a State Hook to your application for


displaying the detail of Player via modal
 Add some HTML tags for displaying a modal which show the detail information of Player (also
using lists and key for get data) when click to Detail button (CSS and HTML tags are your optional
styles) same as follows:

2
 Add some styles to App.css for modal as follow:

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 5px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup img{ width: 100%;}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;

3
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {color: #06D85F;}
.popup .content {
max-height: 30%;
overflow: auto;
}

 Import useState at the top of Player.js and use it as follows:

import React from 'react'


import { Players } from '../Share/ListOfPlayers'
import { useState } from 'react'
export default function Players () {
const [player, setPlayer] = useState([])

 Update the <button> tag to setState and show the modal.

<button onClick={()=>{setPlayer(player)}}>
<a href='#popup1' id='openPopUp'>Detail</a>
</button>

Screen display

4
Conclusions
In this exercise you learnt how to use State Hook in your app.

You might also like