React: display HTML in Modal react Boostrap
I am developing a SPA
in React
for an event and I need to consume a folder with files HTML
and display them in a modal of React Boostrap
, basically I have a section where all speakers are displayed as illustrated in print below:
I need to make a request for the folder with the resumes of the speakers (which is in the public folder of the project created with create-react-app) and display in the modal the HTML with the speaker's resume and I have an example I did on ASPNET: http://interleite.com.br/#palestrantes
Can someone help me, do I need axios
for this task?
The object I am consuming to display the speakers is in this format:
const infoPalestrante = {
pt: [
{ nome: "Daniel Pelissari",
descricaoCurta: "CEO NectarJs",
foto: "DanielPelissari.jpg",
cv: 'dp.html'
},
{ nome: "Lucas da Silva",
descricaoCurta: "Diretor da Viva Lácteos",
foto: "avatar.jpg",
cv: "ls.html" },
]
}
I tried to make the request using axios
this way, I even managed to capture the htmls
but I can't display them and what to pass to display the correct one:
axios.get('../cvs')
.then((res)=>{
console.log(res.data);
this.setState({ cv: res.data})
}).catch((err)=>{
console.log(err);
})
The full code of my component:
import React from 'react';
import { Container, Row, Col, Card, Modal, ButtonToolbar, OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
import axios from 'axios';
export default class Palestrantes extends React.Component {
constructor(props) {
super(props);
// armeza o estado do objeto contendo os palestrantes e os cvs
this.state = { modal: false, palestrantes: {}, cvPalestrante: {}, infoPalestrante: {}, infoSecao: {}, html: {} };
this.toggle = this.toggle.bind(this);
}
toggle() { this.setState(prevState => ({ modal: !prevState.modal })); }
// metodo executado assim que o componente é exibido em tela
componentDidMount() { this.carregarPalestrantes(); }
carregarPalestrantes = async () => {
const infoSecao = { pt: { lblPalestrante: "Palestrantes" } }
// informacoes dos palestrantes
const infoPalestrante = {
pt: [
{
nome: "Daniel Pelissari",
descricaoCurta: "CEO NectarJS",
foto: "avatar.jpg",
cv: 'mpc.html'
},
{
nome: "Marcelo Costa Martins",
descricaoCurta: "Diretor da Viva Lácteos",
foto: "avatar.jpg",
cv: "AnaRaquel.html"
},
]
}
// alimenta
this.setState({ palestrantes: infoPalestrante.pt, infoSecao: infoSecao.pt });
};
abriModal(palestrante) {
// seta um estado para o objeto cvpalestrante de acordo com o palestrante clicado
this.setState({ cvPalestrante: palestrante });
axios.get('../cvs')
.then((res)=>{
console.log(res.data);
this.setState({ cv: res.data})
}).catch((err)=>{
console.log(err);
})
// chama a funcao responssavel por abrir o modal
this.toggle();
}
render() {
// armeza o estado do objeto para uso
const { palestrantes, cvPalestrante, infoSecao } = this.state;
// caminho das fotos dos palestrantes
const caminho = "http://interleite.com.br/sul/assets/img/palestrantes/";
return (
<div id="palestrantes" className="cont">
<Row>
<Container><Col md={12} xs={12}><h1 className="titulo-secao">{infoSecao.lblPalestrante}</h1></Col></Container>
</Row>
<Row>
<Container>
<Col md={12}>
<Row>
{Object.keys(palestrantes).map((i) => {
return (
<Col xs={12} md={3} sm={6} className="palestrante-item" key={palestrantes[i].nome}>
<Card onClick={() => this.abriModal(palestrantes[i])}>
<img className="foto-palestrante" width="100%" src={caminho + palestrantes[i].foto} alt={palestrantes[i].nome}/>
<div className="palestrante-info">
<p className="nome-palestrante">{palestrantes[i].nome}</p>
<p className="cargo-palestrante">{palestrantes[i].descricaoCurta}</p>
</div>
</Card>
</Col>
)
})}
</Row>
</Col>
</Container>
</Row>
<Modal show={this.state.modal} onHide={this.toggle} centered size="lg" unmountOnClose={true} className={this.props.className} >
<Modal.Header closeButton />
<Modal.Body className="text-center">
<img className="foto-palestrante-modal" src={caminho + cvPalestrante.foto} alt={this.state.cvPalestrante.nome} />
<h1 className="nome-palestrante">{this.state.cvPalestrante.nome}</h1>
<h2 className="descricao-palestrante">{this.state.cvPalestrante.descricaoCurta}</h2>
<div dangerouslySetInnerHTML={{__html: this.state.cvPalestrante.cv}} className="text-justify" />
</Modal.Body>
<Modal.Footer>
<div className="text-center">
<ButtonToolbar>
<OverlayTrigger overlay={ <Tooltip>Voltar ao site</Tooltip> }>
<Button onClick={this.toggle} className="btn btn-primary btn-circle btn-circle-lg m-1"><i className="fa fa-undo"></i></Button>
</OverlayTrigger>
</ButtonToolbar>
</div>
</Modal.Footer>
</Modal>
</div>
)
}
}
Thank you, any help will be of great importance.
1 answers
I managed to solve by making a request to the CVS folder like this with axios:
abriModal(palestrante) {
// seta um estado para o objeto cvpalestrante de acordo com o palestrante clicado
this.setState({ cvPalestrante: palestrante });
axios.get(`/cvs/${palestrante.cv}`)
.then((res)=>{
console.log(res.data);
this.setState({ cv: res.data})
}).catch((err)=>{
console.log(err);
})
// chama a funcao responssavel por abrir o modal
this.toggle();
}