I've got a question regarding reactjs and visual studio code.
I'm asking me, if there is somewhere a possibility to display all properties which can be passed to a component?
Actually I have a component Exhibition created, which should display an exhibition.
Sounds simple, but in detail there are several options to passed to an exhibition.
It can be, that a individual text property is being passed, some exhibitions have only a stand, some a stand and a hall etc.
The last thing I added, was a change in the exhibition date. Normally a exhibition is within one month, but now I had a exhibition, which will starts in march and ends in april. So I needed to add more properties again to the component.
So it would be nice to have an overview when I call the component in code, to view all possible properties.
So a little bit similar to methods in C# where all parameter (options) are visible.
Here is the code of this component:
import React, { Component } from 'react';
import Language from './Language.data';
import styled from 'styled-components';
import externalLinkImage from '../images/externalLink.svg';
require('bootstrap');
class Exhibition extends Component {
constructor(props) {
super(props);
this.state = {
};
this.getMonthName = this.getMonthName.bind(this);
}
hoverOn() {
document.getElementById(this.props.id).classList.add('opacity30');
document.getElementById(this.props.id + "externalLinkImage").classList.add('displayBlock');
document.getElementById(this.props.id + "externalLinkText").classList.add('displayBlock');
}
hoverOff() {
document.getElementById(this.props.id).classList.remove('opacity30');
document.getElementById(this.props.id + "externalLinkImage").classList.remove('displayBlock');
document.getElementById(this.props.id + "externalLinkText").classList.remove('displayBlock');
}
getMonthName(monthNo) {
let monthName;
switch(monthNo)
{
case 1:
monthName = Language[this.props.currentLanguage].january;
break;
case 2:
monthName = Language[this.props.currentLanguage].february;
break;
case 3:
monthName = Language[this.props.currentLanguage].march;
break;
case 4:
monthName = Language[this.props.currentLanguage].april;
break;
case 5:
monthName = Language[this.props.currentLanguage].may;
break;
case 6:
monthName = Language[this.props.currentLanguage].june;
break;
case 7:
monthName = Language[this.props.currentLanguage].july;
break;
case 8:
monthName = Language[this.props.currentLanguage].august;
break;
case 9:
monthName = Language[this.props.currentLanguage].september;
break;
case 10:
monthName = Language[this.props.currentLanguage].october;
break;
case 11:
monthName = Language[this.props.currentLanguage].november;
break;
case 12:
monthName = Language[this.props.currentLanguage].december;
break;
default:
break;
}
return monthName;
}
render() {
let exhibitionImage = require('../images/exhibitions/' + this.props.exhibitionImage);
const ExternalLink = styled.div`
position:absolute;
background-color:transparent;
width:30px;
height:30px;
left:50%;
top:50%;
margin-left:-15px;
margin-top:-15px;
background-image: url(${externalLinkImage});
background-position:center;
background-size:contain;
display:none;
`
const ExternalLinkText = styled.div`
position:absolute;
left:50%;
top:50%;
width:200px;
height:30px;
margin-left:-100px;
margin-top:15px;
display:none;
color:#000;
`
const ExhibitionImage = styled.img`
padding:50px;
`
let standText = (this.props.standOwner === undefined) ? Language[this.props.currentLanguage].meetUsOnOurStand : Language[this.props.currentLanguage].meetUsAt + " " + this.props.standOwner + " " + Language[this.props.currentLanguage].stand;
let monthName;
let startMonthName;
let endMonthName;
if(this.props.startMonth != undefined && this.props.endMonth != undefined) {
startMonthName = this.getMonthName(this.props.startMonth);
endMonthName = this.getMonthName(this.props.endMonth);
}
else {
monthName = this.getMonthName(this.props.month);
}
return (
<div>
<div className="row" onMouseEnter={this.hoverOn.bind(this)} onMouseLeave={this.hoverOff.bind(this)}>
<div className="col-12">
<a href={this.props.linkUrl} rel="noopener noreferrer" target="_blank">
<ExhibitionImage id={this.props.id} src={exhibitionImage} className="img-fluid"></ExhibitionImage>
<ExternalLink id={this.props.id + "externalLinkImage"}></ExternalLink>
<ExternalLinkText id={this.props.id + "externalLinkText"}><small>{Language[this.props.currentLanguage].externalLink}</small></ExternalLinkText>
</a>
</div>
</div>
<div className="row">
<div className="col-12">
{
this.props.text !== undefined && this.props.text.length > 0 &&
<div>
{this.props.text}
</div>
}
{
(this.props.text === undefined || this.props.text.length === 0) &&
<div>
{
!this.props.location &&
standText + " " + this.props.stand
}
{
this.props.location &&
Language[this.props.currentLanguage].meetUsIn + " " + this.props.location
}
{
this.props.hall != undefined && this.props.hall != null &&
", " + Language[this.props.currentLanguage].hall + " " + this.props.hall
}
<br />
{
this.props.startMonth && this.props.endMonth &&
this.props.startDay + " " + startMonthName + " - " + this.props.endDay + " " + endMonthName + " " + this.props.year
}
{
this.props.month &&
this.props.days + " " + monthName + " " + this.props.year
}
</div>
}
</div>
</div>
</div>
);
}
}
export default Exhibition;
But maybe it's not a question about an overview, but of using a better way of handling / coding than I used... ;-)
