React: Display HTML in modal React Boostrap

Question

I’m developing a SPA in React for an event and need to consume a folder with files HTML and display them in a modal of the React Boostrap, basically I have a section where is displayed all the speakers as illustrated in print below:

I need to make a request to the folder with the speakers' resumes (which is in the public folder of the project created with create-React-app) and display in modal the HTML with the speaker’s resume and I have an example that I did in ASPNET: http://interleite.com.br/#speakers

Someone can help me, I need the axios for this task?

The object I’m 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 that way, I even managed to capture the htmls but I can’t display them and what to pass to display the correct:

axios.get('../cvs')
    .then((res)=>{
      console.log(res.data);
       this.setState({ cv: res.data})
     }).catch((err)=>{
       console.log(err);
 })

The complete 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>
    )
    }
}

Thanks, any help will be of great importance.

Answer 1

I was able to solve by making a request to the cvs folder like this with Xios:

   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();   
}