Im working on website for MMA gym. Gym has many fighters. Every fighter has his own card profile. For cards i use map function and information like name, nickname i have in array.
I'd like create page about fighter. So when someone click on the card. Page will show up with correct info. For example when i click on fighter1 page with info about fighter1 will show up.
I've made some popup logic but i have no idea how display correct information.
popup logic
const Fighter1= ({setIsOpenPopup}) => {
return (
<Container onClick={() => setIsOpenPopup(false)}>
<Content onClick={(e) => e.stopPropagation()}>
<Header>
<HeaderH3>Title here</HeaderH3>
<CloseBtn onClick={() => setIsOpenPopup(false)}>
</CloseBtn>
</Header>
<InfoP>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Perferendis, molestiae.
</InfoP>
<FooterP>
XXX
</FooterP>
</Content>
</Container>
);
};
export default Fighter1;
at this time i have folder with pages fighter1, fighter2 etc. Yes i wanted use map function but i have no idea how then display proper info too.. This is easier way i thing.
For maping fighter cards i use this standart map function. It's just array and map
const DataAthletes = () => {
const athletes = [
{
id: 1,
firstName: 'David',
nickname: '"SPAR?AN"',
lastName: 'Hošek',
sport: 'MMA, BOX',
secondLineSport: '',
facebook: '/',
instagram: '/',
photo: Hosek,
button: 'Zjistit více'
},
{
id: 2,
firstName: 'Mat?š',
nickname: '"SLÁVISTA"',
lastName: 'Jurá?ek',
sport: 'MMA, BOX',
secondLineSport: '',
facebook: '/',
instagram: '/',
photo: Juracek,
button: 'Zjistit více'
},
]
return (
<AthleteContainer id="athletes">
<HeadingH2 size='3'>Naši Atleti</HeadingH2>
<AthleteMainP>Aktuáln? nás na profesionální úrovní representují tito atleti. RPG též representuje mnoho atlet?
na amatérské úrovni.
</AthleteMainP>
<CenterWrapper>
<AthleteWrapper>
{athletes.map(athlete =>
<Athletes athlete={athlete}/>
)}
</AthleteWrapper>
</CenterWrapper>
</AthleteContainer>
)
}
export default DataAthletes;
And finally in the end whole fighter card
const Athletes = ({athlete}) => {
const [imgHover, setImgHover] = useState(false);
const onHover = () => {
setImgHover(!imgHover)
}
const [isOpenPopup, setIsOpenPopup] = useState(false);
return (
<AthleteCards onClick={() => setIsOpenPopup(true)}>
{isOpenPopup &&
<Popup setIsOpenPopup={setIsOpenPopup} />}
<NameWrapperH3>
<FirstName>{athlete.firstName}</FirstName>
<Nickname>{athlete.nickname}</Nickname>
<LastName>{athlete.lastName}</LastName>
</NameWrapperH3>
<SportWrapper>
<SportName>{athlete.sport}</SportName>
<SportName>{athlete.secondLineSport}</SportName>
</SportWrapper>
<SocialWrapper>
<Link href={athlete.facebook}>
<FacebookIcon/>
</Link>
<Link href={athlete.instagram}>
<InstagramIcon/>
</Link>
</SocialWrapper>
<ImgWrapper>
<AthletePhoto src={athlete.photo}/>
</ImgWrapper>
</AthleteCards>
)
}
export default Athletes;
I can say popup works relatively fine. There are some issues but i think it's CSS issue so it's for another topic maybe.
I'd like to ask with big pleased request. How can i display proper fighter page depending on which card i click please?