I am very new to react and am attempting to follow a basic table tutorial.
I have installed react-bootstrap-table
npm install react-bootstrap-table --save
I have imported bootstrap-table
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
I have imported the css file:
import '../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
With the above I am expecting a table to display as below:
However what I am seeing with my code is:
Why isn't the table appearing as in the example?
import React, { Component } from "react";
import './MenuButton.css';
import './MenuContainer.css';
import MenuButton from './MenuButton';
import Menu from './Menu';
import serverCall from "../api/ServerCall";
import {BootstrapTable,TableHeaderColumn} from 'react-bootstrap-table';
import '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css'
class MenuContainer extends Component {
constructor(props, context) {
super(props, context);
this.state = {
visible: false
};
this.handleMouseDown = this.handleMouseDown.bind(this);
this.toggleMenu = this.toggleMenu.bind(this);
this.getCustomers();
}
handleMouseDown(e) {
this.toggleMenu();
e.stopPropagation();
}
toggleMenu() {
this.setState({
visible: !this.state.visible
});
}
getCustomers(){
console.log("Getting Customers");
serverCall(function(error, response) {
if (error) {
alert("Authorization Failed.")
} else {
console.log(response);
}
},"","customers.php");
}
render() {
let products = [{
id: 1,
name: "Item name 1",
price: 100
},{
id: 2,
name: "Item name 2",
price: 100
}];
return (
<div>
<div className="menu-container">
<div className="grid-item-hamburger-menu">
<MenuButton handleMouseDown={this.handleMouseDown}/>
<Menu handleMouseDown={this.handleMouseDown} menuVisibility={this.state.visible}/>
</div>
<div className="grid-item-dashboard-title">
Dashboard | Customers
</div>
<div className="grid-item-search">
</div>
<div className="grid-item-table">
<BootstrapTable data={ products }>
<TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>
</div>
</div>
</div>
);
}
}
export default MenuContainer;
I was able to solve this problem by including the following code in the index.js file. Not only did my table not have any formatting, my initial project did not as well.
import 'bootstrap/dist/css/bootstrap.min.css';
try this line
import '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css'
in main entry components
For future reference, you should only need to import from the base of the app and not the node_modules path. I use the following and it works fine:
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'
The snippets provided in the component examples fails to mention the need to install both the react-bootstrap module as well as bootstrap itself. Mentioned here: reactbootstrap getting started docs
TLDR: run npm install react-bootstrap bootstrap
Related
This started happening suddenly when debugging a seemingly unrelated error on Netlify build. I do not have this issue locally. I've cleared my cache, deleted my package-lock and node module folder and updated everything, as well as ran a build without cache on Netlify. I've checked the file/folder names for case sensitive also. What could it be?
One of the templates the component is used:
import React, { Component } from 'react'
import GridTemplate from '../components/GridTemplate/GridTemplate.js'
import { graphql } from 'gatsby'
...
class Mediums extends Component {
render() {
let allTitles = []
this.props.data.allMarkdownRemark.edges.forEach( post => {
allTitles.push(post.node.frontmatter.title)
})
return (
<div style={{position: "absolute", width: "100%", height: "100%", overflow: "hidden", overflowY: "scroll"}}>
<HeaderMeta subTitle={this.props.pageContext.medium} itemGroup={this.props.data.allMarkdownRemark}/>
<GridTemplate
data={this.props.data.allMarkdownRemark.edges}
title={this.props.pageContext.medium}
pastUrl={this.props.location.pathname}
/>
</div>
)
}
}
export default Mediums
The GridTemplate component:
import React, { Component } from 'react';
import S from './imageGrid.module.sass'
import ArtImage from '../ArtImgae/ArtImage.js'
import Link from 'gatsby-link'
import { arrowSvg } from '../../img/svg-index.js'
import InlineSVG from 'svg-inline-react'
import Header from '../Header/Header.js'
import 'typeface-alegreya-sans-sc'
import 'typeface-cinzel-decorative'
import 'typeface-cinzel'
class GridTemplate extends Component {
render() {
const postLinks = this.props.data.map( post => {
const frontmatter = post.node.frontmatter
return (
<div key={post.node.fields.slug} className={S.imageItem}>
<Link
to={post.node.fields.slug}
//pass prop of cat / med paths for back button on art item
state={{pastUrl: this.props.pastUrl || null}}
>
<h2>{frontmatter.title}</h2>
<ArtImage
fluid={frontmatter.featuredImage.childImageSharp.fluid}
imageData={frontmatter}
/>
</Link>
</div>
)
})
//from context
const title = this.props.title
//const totalCount = this.props.data.allMarkdownRemark.totalCount not used
return (
<section id={S.GridTemplate}>
<div className={S.headerHolder}>
<Header to={["home", "archive"]} white={true} />
</div>
<div className={S.titleHolder}>
<Link to = "/store" className={S.storeLink} >
<InlineSVG src={arrowSvg} />
</Link>
<h1 id={S.mediumTitle}>{title}</h1>
</div>
<div className={S.imageGrid}>
{postLinks}
</div>
</section>
)
}
}
export default GridTemplate
File structure:
The component GridTemplate.js is used by categorys.js and mediums.js
Found it. Turns out my renaming of the path to the component folder to uppercase was never noticed by my Mac OS, despite appearing uppercase. On Githubs end, the path was still lower case, which was wrong. Used this gude to rename from Githubs end.
Try again deployment to netlify after changing import type-
from
import GridTemplate from '../components/GridTemplate/GridTemplate.js'
to
import GridTemplate from '../components/GridTemplate/GridTemplate'
I had the same issue when trying to deploy to Netlify:
can't resolve '../components/search/index' in '/opt/build/repo/src/pages'
My original line was:
import Search from "../components/search/index";
Please notice the lowercase for the directory name search. For some reason I had to rename the folder to uppercase Search, i.e.,:
import Search from "../components/Search/index";
and Netlify would build successfully.
I am new to React, so hopefully it's not a silly question but I have been getting the error below when I ran the code.
I believe the error is related to one of the two files' codes below. Can someone help me to see where I'm making a mistake?
App.js file:
import React from 'react';
import './App.css';
import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';
const business = { imageSrc:
'https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg',
name: 'MarginOtto Pizzeria',
address: '1010 Paddington Way',
city: 'Flavortown',
state: 'NY',
zipCode: '10101',
category: 'Italian',
rating: 4.5,
reviewCount: 90};
const businesses = [business,business,business,business,business,business];
class App extends React.Component {
render() {
return (
<div className="App">
<h1>ravenous</h1>
<SearchBar />
<BusinessList businesses={businesses} />
</div>
);}}
export default App;
Business.js file:
import React from 'react';
import './Business.css';
import '../App/App'
class Business extends React.Component {
render() {
const { business } = this.props;
return (
<div className="Business">
<div className="image-container">
<img src='https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg' alt=''/>
</div>
<h2>{business.name}</h2>
<div className="Business-information">
<div className="Business-address">
<p>{business.address}</p>
<p>{business.city}</p>
<p>{business.state} {business.zipCode}</p>
</div>
<div className="Business-reviews">
<h3>{business.category}</h3>
<h3 className="rating">{business.rating} stars</h3>
<p>{business.reviewCount} reviews</p>
</div>
</div>
</div>
);
}
}
export default Business;
The error seems to be in your BusinessList component.
you pass this.business as a prop to Business but it should just be business (the name of the parameter use in the .map function)
import React from "react";
import "./BusinessList.css";
import Business from "../Business/Business";
class BusinessList extends React.Component {
render() {
return (
<div className="BusinessList">
{this.props.businesses.map(business => {
return <Business business={business} />;
})}
</div>
);
}
}
export default BusinessList;
In Business.js file try to change code like this
return business && (
...
);
if business is undefine then it returns null.
Or if it doesn't work try to use ?: operator like
return business ? (...) : null;
Hope this help you to resolve issue
So I am trying to learn how to use the npm library, and I found this carousel. I implemented it into my project, but I am unsure about how to change the attributes. Here is the doc: https://www.npmjs.com/package/react-responsive-carousel
and here is my current code:
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import Project1 from './Project1'
import Project2 from './Project2'
class Projects extends Component {
constructor(props){
super(props)
this.state = {
showArrows: 'false',
showIndicators: 'false'
}
}
render() {
const styles = {
display: 'none'
}
return (
<Carousel>
<div>
<Project1 />
</div>
<div>
<img style = {styles}src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" />
<Project2 />
</div>
</Carousel>
);
}
};
export default Projects
You can do it as you will do for normal components.
<Carousel showArrows={false} showIndicators={false}>
Refer for demos.
I am building a React app with the new react-bootstrap v1 (where Bootstrap 3 for React has changed to no longer include the Panel component - it is now instead replaced with the Card component). I installed the npm install which is: npm install react-bootstrap bootstrap
But when I go to run the application it tells me: 'react-bootstrap' does not contain an export named 'Card'. Here is what my component looks like:
import React, { Component } from 'react';
import mealsCall from '../DBRequests/mealCalls';
import { Card, Button } from 'react-bootstrap';
export class Meals extends Component {
state = {
meals: [],
}
componentDidMount() {
mealsCall
.getMeals()
.then((meals) => {
this.setState({ meals })
})
.catch((error) => {
console.error('error with GET meals call', error);
});
};
render() {
const meals = this.state.meals.map((meal) => {
return (
<div key={meal.id}>
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>{meal.mealName}</Card.Title>
<Card.Text>
<h3>{meal.restaurantName}</h3>
<h4>{meal.city}, {meal.state}</h4>
</Card.Text>
<Button variant="primary">View Meal</Button>
</Card.Body>
</Card>
</div>
);
})
return (
<div>
{meals}
</div>
);
}
}
From react-bootstrap version 1.0.0-beta.x:
The correct import statement for Card is
import Card from "react-bootstrap/Card";
The correct import statement for Button is
import Button from "react-bootstrap/Button";
I need to use react addons, ReactCSSTransitionGroup, but still I have error Uncaught TypeError: Cannot read property 'CSSTransitionGroup' of undefined.
I have react, react-dom and ReactCSSTransitionGroup v: 15.4.2, so shouldn't have problem with it. I have installed react-addons-css-transition-group via mpn.
import React, { PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
I add to webpack configuration
externals: {
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
but it didn't help
I use it in index.js (in Alert folder):
import React, { PropTypes } from 'react';
import BasicAlert from './basicAlert';
import {
alertsWrapper,
enter,
enterActive,
leave,
leaveActive,
} from './alertsHandler.scss';
import CSSTransitionGroup from 'react-addons-css-transition-group';
//const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
const AlertsHandler = ({ closeTime, alerts = [] }) => (
<div className={alertsWrapper}>
<ReactCSSTransitionGroup
transitionName={{
enter,
enterActive,
leave,
leaveActive,
}}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
{alerts.map(item => (
<BasicAlert
closeTime={closeTime}
{...item}
key={`alert${item.id}`}
/>
))}
</ReactCSSTransitionGroup>
</div>
);
AlertsHandler.propTypes = {
closeTime: PropTypes.number,
alerts: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
type: PropTypes.string,
alertContent: PropTypes.node,
repeated: PropTypes.number,
})),
};
export default AlertsHandler;
and import in App.js:
import React from 'react';
import Alert from '../components/Alerts';
var example = 'whatever';
export default class App extends React.Component {
render() {
return (
<div>
<Alert closeTime={3000} alerts={example} />
</div>);
}
}
I try to import: import React, { PropTypes } from 'react/addons'; and import { __Addons as addons, PropTypes } from 'react' but it give me error canno't read property addons of undefine. I even tryed to import directly from node_modules or use depreciate module react-addons.
I'm not sure, but I think there is problem with import react-with-addons, but I can't find properly way to do it.
If I gave to less information, please ask.
In my case, I was using a className prop on my CSSTransition component. It should be classNames. Spent hours figuring that out... just posting in case it helps somebody.
ReactCSSTransitionGroup is not a export from the main React package.
Just remove the third line const ReactCSSTransitionGroup = ....
import React, { PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
This should work
Update 1:
Subsequent error being thrown can be resolved like so
In index.js (in Alert folder):
import React, { PropTypes } from 'react';
...
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
//const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
const AlertsHandler = ({ closeTime, alerts = [] }) => (
<div className={alertsWrapper}>
<ReactCSSTransitionGroup
...
</ReactCSSTransitionGroup>
</div>
);
...