bottomwrap.tsx

import React from 'react'
import footer1 from '../Inicio_files/img/cita-secretaria.png'
import footer2 from '../Inicio_files/img/TFG.png'
import footer3 from '../Inicio_files/img/etsiiorienta.png'
import footer4 from '../Inicio_files/img/expon-us250A.png'


class Bottomwrap extends React.Component {
    public render () {
    
    return(
    <div className="container-fluid" id="fav-topwrap">
        <div className="title topwrapTitle">
          <h2 className="cardTitleText">Enlaces de Interés</h2>
        </div>
      <div className="row-fluid topwrapImgsDiv">
        <div id="fav-top" className="clearfix">			
          <div id="fav-top1" className="span3">
            <BottomwrapElement img={footer1} classname="favpromote400" link="https://www.informatica.us.es/index.php/secretaria" dsihtml=".favpromote400 {    background-color: #FFFFFF;    border: 1px solid #DDDDDD;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;  }.favpromote400:hover {     background-color: #B8B8B8;   }"/>
          </div>
          <div id="fav-top2" className="span3">
            <BottomwrapElement img={footer2} classname="favpromote942" link="https://tfc.eii.us.es/TfG/" dsihtml=".favpromote942 { background-color: #FFFFFF; border: 1px solid #DDDDDD; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; }.favpromote942:hover {  background-color: #990000;     }"/>
          </div>
          <div id="fav-top3" className="span3">
            <BottomwrapElement img={footer3} classname="favpromote5" link="https://www.informatica.us.es/index.php/etsiiorienta" dsihtml=".favpromote5 { background-color: #FFFFFF; border: 1px solid #DDDDDD; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .favpromote5:hover { background-color: #233253; } "/>
          </div>
          <div id="fav-top4" className="span3">
            <BottomwrapElement img={footer4} classname="favpromote761" link="https://institucional.us.es/exponaus/" dsihtml=".favpromote761 { background-color: #FFFFFF; border: 1px solid #DDDDDD; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .favpromote761:hover { background-color: #EDD15F; } "/>
          </div>
        </div>
      </div>
    </div>
    ) }
}


interface IBottomwrapElementProps {
  dsihtml: string,
  classname: string,
  link: string,
  img: string,
}

interface IBottomwrapElementState {
  dsihtml: string,
  classname: string,
  link: string,
  img: string,
}

class BottomwrapElement extends React.Component<IBottomwrapElementProps, IBottomwrapElementState> {

  constructor(props: IBottomwrapElementProps){
    super(props);
    this.state = { link: this.props.link , dsihtml: this.props.dsihtml, img: this.props.img, classname: this.props.classname};
}

  public render(){
    return (
    <div className="moduletable">
      <style type="text/css" dangerouslySetInnerHTML={{__html: this.state.dsihtml}}/>
        <div id="favpromote" className={this.state.classname}>
          <div id="favpromote-uploadimage" className="topwrapImgs">
            <a href={this.state.link} target="_self">
              <img src={this.state.img} alt=""/>
            </a>
          </div>
        </div>
    </div>)
  }
}

export default Bottomwrap;