Reactstrap Card component throws error - reactjs

Question

The issue is with the reactstrap cards: https://reactstrap.github.io/components/card/
Using reactstrap components like Card, etc is not working.
Component: Version I
import React, { Component } from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap';
class MoviesIndex extends Component {
render() {
return (
<CardDeck>
<Card>
<CardImg top width="100%" src="" alt="Movie Poster" />
</Card>
</CardDeck>
);
}
}
export default MoviesIndex;
Output: *It works fine without any errors.
But when I try to use the rest of the components from reactstrap. It throws errors on console.
Component: Version II
import React, { Component } from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap';
class MoviesIndex extends Component {
render() {
return (
<CardDeck>
<Card>
<CardImg top width="100%" src="" alt="Movie Poster" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</CardDeck>
);
}
}
export default MoviesIndex;
Output:
package.json
{
"name": "client",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.17.1",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-transition-group": "^2.2.1",
"reactstrap": "^4.8.0",
"redux": "^3.7.2",
"redux-promise": "^0.5.3"
}
}
I am not able to debug this issue. Please help! TIA.

Answer 1

The components such as CardBody, etc are not available in v4.8.0.
Upgrading to latest release (reactstrap v5.0.0-alpha.4) resolves this issue!
npm install --save reactstrap#5.0.0-alpha.4
Refer to the issue that I created on reactstrap#github for more details:
https://github.com/reactstrap/reactstrap/issues/730

Answer 2

This looks like a typo here:
renderMovies() {
return _.map(this.props.movies, movie => {
Missing )
Try
_.map(this.props.movies, movie) => {
If that doesn't do it, put console.log() after everything to see where it becomes undefined.
This type of error usually results from something not being exported correctly or something being null/undefined due to data missing, etc.
This is a good opportunity for me to recommend using ES Lint, so you can gain extra help 24/7 from the passive display of errors. Check it out if you aren't using it. It's absolutely worth looking into and using.
I won't recommend any specific linting configs in here. That is out of scope of this help. ES Lint will underline code errors such as the missing ) with a red underline, so you will experience less of this kind of thing :)