JavaScript

I tried to import the Card component from the Reactstrap library, and unfortunately this has resulted in the error below.

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

When I remove the element, the page works again as intended.

IMPORTS (IN PROFILE COMPONENT):

import React, { Component } from 'react';
import {Card, Container, Table} from 'reactstrap';

EXPORT (AT BOTTOM OF PROFILE COMPONENT):

export default Profile;

In APP.js router:

<Route path='/profile' exact={true} component={Profile}/>

Full Profile component:

import React, { Component } from 'react';
import {Card, Container, Table} from 'reactstrap';
import AppNavbar from './AppNavbar';

const GET_SINGLE_USER_URL = 'http://localhost:8080/users/get-user-by-username'

class Profile extends Component {

    constructor(props) {
        super(props);
        this.state = {user: '', token: ''};
    }

    componentDidMount() {
        const payload = {
            "username": localStorage.getItem("username"),
            "password": localStorage.getItem("password")
        };
        fetch(GET_SINGLE_USER_URL, {
            method: 'POST',
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "Authorization": localStorage.getItem("token")
            },
            body: JSON.stringify(payload)
        })
            .then(response => response.json())
            .then(data => this.setState({user: data}));
    }

    render() {
        const {user, isLoading} = this.state;

        if (isLoading) {
            return <p>Loading...</p>;
        }

        return (
            <div>
                <AppNavbar/>
                <Container fluid>
                    <h3 className="player-list-header">Profile</h3>

                    <Table className="mt-4">
                        <thead>
                        <tr id="player-list-row">
                            <th className="player-list-data-text">Name</th>
                            <th className="player-list-data-text">Username</th>
                            <th className="player-list-data-text">Location</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr key={user.id}>
                            <td style={{whiteSpace: 'nowrap'}} className="player-list-key-text">{user.name}</td>
                            <td className="player-list-key-text">{user.username}</td>
                            <td className="player-list-key-text">{user.location}</td>
                        </tr>
                        </tbody>
                    </Table>
                    <Card>
                        <Card.Body>This is some text within a card body.</Card.Body>
                    </Card>


                </Container>
            </div>
        );

    }

}
export default Profile;

Answer

I think you might not have read reactstrap’s docs closely enough – the component should be CardBody, not Card.Body. Here’s a link to the docs, and a simplified CodeSandbox.

When trying to use Card of Reactstrap I get Warning: React.jsx: type is invalid — expected a string (for built-in components) or a class/function?

Advertisement

Answer