Noratrieb/hugos-lieblingsflugzeuge
1
0
Fork 0
mirror of https://github.com/Noratrieb/hugos-lieblingsflugzeuge.git synced 2026-01-16 20:55:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

hugo mag functional components

Browse source
This commit is contained in:
nora 2021-07-09 11:03:10 +02:00
parent 51646d73fd
commit e7fa62454c
7 changed files with 292 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/PlaneInfo.js
View file

@ -1,41 +1,29 @@
import React, {Component} from 'react';
import React from 'react';
import {useLocation} from 'react-router-dom';
import planes from './planes.json';
import './plane.css';
class Planes extends Component {
render() {
const loc = this.props.location.pathname;
const planeName = loc.replaceAll('/flugzeug/', '');
let plane;
for (const e of planes) {
if (e.category + e.name === planeName) {
plane = e;
break;
}
}
const Planes = () => {
const route = useLocation().pathname.replaceAll("/flugzeug/", "");
let content;
if (plane === undefined) {
content =
<div>
const plane = planes.find(p => p.category + p.name === route);
const imgPath = process.env.PUBLIC_URL + '/img/' + plane.category + plane.img;
return (
<div>
{
plane ?
<>
<h2>{plane.name}</h2>
<img src={imgPath} alt={'Bild von ' + plane.name} className="plane-image"/>
<p>{plane.description}</p>
</>
:
<h2>Flugzeug nicht gefunden.</h2>
</div>
;
} else {
const imgPath = process.env.PUBLIC_URL + '/img/' + plane.category + plane.img;
content =
<div>
<h2>{plane.name}</h2>
<img src={imgPath} alt={'Bild von ' + plane.name} className="plane-image"/>
<p>{plane.description}</p>
</div>
;
}
return (
content
);
}
}
</div>
);
}
export default Planes;