Boa tarde,
Tenho um componente onde consumo dados de uma API, até ai tudo bem!
Estou tentando adicionar um modal do reactstrap e estou enfrentando o seguinte erro:
TypeError: Cannot convert undefined or null to object
O código completo do meu componente é:
import React from 'react';
import styled from 'styled-components';
import { Container, Row, Col, Card } from 'reactstrap';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
// api
import api from '../../servicos/Api';
const BoxPalestrantes = styled.div`
.card{ background-color: transparent !important; border: 0; }
.palestrantes{ background: #27ae60; width: 100%; padding: 5rem 0 5rem 0; }
.palestrante-item{ margin-bottom: 1rem; }
.foto-palestrante{ border-radius: 1rem;}
.titulo{font-family: 'Oswald', sans-serif; font-size: 2rem; text-transform: uppercase; font-weight: bold; padding: 2rem 0 2rem 0; color:#fff; }
.subtitulo{font-family: 'Oswald', sans-serif; font-size: 2rem; font-weight: 500; }
.palestrante-info{ position: absolute; opacity: 0; transition: visibility 0s 0.1s, opacity 0.1s linear; height: 100%; width: 100%; align-items: center; flex-direction: column; justify-content: flex-end; display: flex; }
.palestrante-info p{text-align: center; margin: 0; color: #fff; font-family: 'Oswald', sans-serif; font-size: 1rem; text-transform: uppercase; font-weight: bold;}
.palestrante-info:hover{background: rgba(44, 62, 80, 0.90); padding: 10px; max-width: 100%; height: 100%; opacity: 1; transition: opacity 0.1s linear; cursor: default; border-radius: 1rem;}
.palestrante-item{ margin: 1rem 0 1rem 0; }
`
export default class Palestrantes extends React.Component {
// metodo construtor - modal
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState(prevState => ({
modal: prevState.modal
}));
}
// armeza o estado do objeto contendo os palestrantes
state = { palestrantes: {} }
// metodo executado assim que o componente é exibido em tela
componentDidMount() {
this.carregarPalestrantes();
}
carregarPalestrantes = async () => {
//caminho da requiscao na api
const response = await api.get("palestrante/todos/5a34a185-bbd8-461e-6ffd-08d6cccadba7");
// atualiza o estado dos patrocinadores com base no retorno da api
this.setState({ palestrantes: response.data })
};
render() {
// armeza o estado do objeto para uso
const { palestrantes } = this.state;
// url de caminho das imagens
const caminho = "https://localhost:44332/api/palestrante/Imagem/";
return (
<BoxPalestrantes>
<div className="palestrantes">
<Row>
<Container>
<Col md={{ size: 12 }} xs={{ size: 12 }}>
<h1 className="titulo">Palestrantes</h1>
</Col>
</Container>
</Row>
<Row>
<Container>
<Col md={{ size: 12 }}>
<Row>
{
Object.keys(palestrantes).map((item) => {
return (
<Col xs={{ size: 12 }} md={{ size: 3 }} sm={{ size: 6 }} className="palestrante-item" key={palestrantes[item].id}>
<Card>
<img className="foto-palestrante" width="100%" src={caminho + palestrantes[item].foto} alt={palestrantes[item].nome} />
<div className="palestrante-info">
<p>{palestrantes[item].nome}</p>
<p>{palestrantes[item].descricaoCurta}</p>
</div>
</Card>
</Col>
)
})
}
</Row>
</Col>
</Container>
</Row>
</div>
<div>
<Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
</BoxPalestrantes>
)
}
}
Alguém pode me ajudar? Sou iniciante em ReactJs e desde já agradeço pela atenção!