Reactjs - Typeerror: Cannot Convert Undefined or null to Object

Question

Good afternoon,

I have a component where I consume data from an API, so far so good!

I am trying to add a reactstrap modal and am facing the following error:

Typeerror: Cannot Convert Undefined or null to Object

The complete code of my component is:

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

Can anyone help me? I’m a beginner in Reactjs and I thank you for your attention!

Answer 1

Solved!

I was setting twice the state of my component. I now set in my constructor method as follows:

constructor(props) {
        super(props);
        this.state = {
            modal: false,
            palestrantes: {}
        };