I created a grid inside of a react-bootstrap Jumbotron, but when I export it to my app.jsx none of the grid contents are displayed (but the Jumbotron and my custom styles are)
All of my other components are working fine, so I'm not sure why this isn't.
App.js:
import React, { Component } from 'react';
import {Grid} from 'react-bootstrap';
import {Row} from 'react-bootstrap';
import {Col} from 'react-bootstrap';
import MyNavbar from './modules/MyNavbar.jsx';
import SectionOne from './modules/SectionOne.jsx'
import SectionTwo from './modules/SectionTwo.jsx'
import SectionThree from './modules/SectionThree.jsx';
class App extends Component {
render() {
return (
<div className="App">
<MyNavbar/>
<SectionOne/>
<SectionTwo/>
<SectionThree/>
</div>
);
}
}
export default App;
SectionThree.jsx:
import React, { Component } from 'react';
import {Jumbotron} from 'react-bootstrap';
import howItWorks from './howItWorks.jsx';
class SectionThree extends Component {
render() {
return(
<Jumbotron id="jumbotronThree">
<howItWorks/>
</Jumbotron>
)
}
}
export default SectionThree;
howItWorks.jsx:
import React, { Component } from 'react';
import {Image} from 'react-bootstrap';
import {Grid} from 'react-bootstrap';
import {Col} from 'react-bootstrap';
import {Row} from 'react-bootstrap';
class howItWorks extends Component {
render() {
return(
<div>
<Grid fluid>
<Row>
<Col md={4}>
<div className="searchIcon">
<Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
</div>
</Col>
<Col md={4}>
<div className="payIcon">
<Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
</div>
</Col>
<Col md={4}>
<div className="eatIcon">
<Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
</div>
</Col>
</Row>
<Row>
<Col md={4}>
<p>
test
</p>
</Col>
<Col md={4}>
<p>
test
</p>
</Col>
<Col md={4}>
<p>
test
</p>
</Col>
</Row>
</Grid>
</div>
)
}
}
export default howItWorks;
React components should always start with uppercase letter:
class HowItWorks extends Component {
render() {
...
<Jumbotron id="jumbotronThree">
<HowItWorks/>
...
There is a good answer on stackoverflow here covering this.
The Component Grid is now calling as Container. Type Container instead of Grid in the react js code.
Related
I'm fairly new to React and what to understand how I can (if it's possible) change prop values for nested components at page level.
Here's an example of what I mean:
I have a component called Text
I have a component called Image
I have a component called TextImage
In TextImage, I am using both Text and Image components. Both of these nested components have their own props.
Now, I cannot define these prop values in the TextImage component itself, because I may need to use the TextImage component multiple times on my page.
Here is Text.js:
import React from 'react';
class Text extends React.Component{
render() {
const header = this.props.header;
const copy = this.props.copy;
return(
<section className="text">
<h2 className="text__header">{ header }</h2>
<div className="text__copy">{ copy }</div>
</section>
)
}
}
export default Text;
Here is Image.js:
import React from 'react';
class Image extends React.Component{
render() {
const image_src = this.props.image_src;
const image_alt = this.props.image_alt;
return(
<section className="image">
<img loading="lazy" src={ image_src } alt={ image_alt } />
</section>
)
}
}
export default Image;
And here is TextImage.js (in its current form):
import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import Text from '../Text/Text';
import Image from '../Image/Image';
import "./TextImage.scss";
class TextImage extends React.Component{
render(){
return(
<section className="textImage">
<Container>
<Row>
<Col md={6}>
<Text />
</Col>
<Col md={6}>
<Image/>
</Col>
</Row>
</Container>
</section>
)
}
}
export default TextImage;
I cannot do something like the below, because then those props will be consistent for whenever I use the TextImage component.
<section className="textImage">
<Container>
<Row>
<Col md={6}>
<Text header="This is header" copy="this is copy" />
</Col>
<Col md={6}>
<Image image_src="" image_alt="image" />
</Col>
</Row>
</Container>
</section>
In my Homepage.js file, I have tried to do something like this:
<TextImage header="test" /> which I kind of knew beforehand wouldn't work as the props are assigned to the Text and Image components within TextImage.
I can easily output my TextImage markup in Homepage.js (like below), but I'm looking for a cleaner approach.
import React from "react";
import Text from "../components/Text/Text";
import Image from "../components/Image/Image";
function Homepage() {
return (
<>
<section className="textImage">
<Container>
<Row>
<Col md={6}>
<Text header="This is header" copy="this is copy" />
</Col>
<Col md={6}>
<Image image_src="" image_alt="image" />
</Col>
</Row>
</Container>
</section>
</>
);
}
export default Homepage;
You just need to pass the props which are used in Text and Image to TextImage component as below.
Demo at : https://codesandbox.io/s/gallant-golick-zkmdi?file=/src/App.js
import "./styles.css";
import React from "react";
class Text extends React.Component {
render() {
const header = this.props.header;
const copy = this.props.copy;
return (
<section className="text">
<h2 className="text__header">{header}</h2>
<div className="text__copy">{copy}</div>
</section>
);
}
}
class Image extends React.Component {
render() {
const image_src = this.props.image_src;
const image_alt = this.props.image_alt;
return (
<section className="image">
<img loading="lazy" src={image_src} alt={image_alt} />
</section>
);
}
}
class TextImage extends React.Component {
render() {
const image_src = this.props.image_src;
const image_alt = this.props.image_alt;
const header = this.props.header;
const copy = this.props.copy;
return (
<section className="textImage">
<div>
<div>
<div md={6}>
<Text header={header} copy={copy} />
</div>
<div md={6}>
<Image image_alt={image_alt} image_src={image_src} />
</div>
</div>
</div>
</section>
);
}
}
export default function App() {
return (
<div className="App">
<TextImage header='Random Header' copy='RandomCopy' image_src='https://picsum.photos/200/300' image_alt='randomImage' />
<TextImage header='Random Header2' copy='RandomCopy2' image_src='https://picsum.photos/300/300' image_alt='randomImage2' />
</div>
);
}
I am trying to make a react website and it randomly stopped loading on my browser. The console displays a long list of errors. Most of these are: "tabTarget is null" and "Unchecked lastError value: Error: Unexpected error occured".
I can't seem to find similar problems. Below is my code for App.js, Footer.js, and Index.js.
App.js
import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
//import NavbarBrand from 'react-bootstrap/NavbarBrand';
import './App.css';
import Footer from './components/Footer';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'My name',
headerLInks: [
{title: 'Home', path: '/'},
{title: 'About', path: '/about'},
{title: 'Contact', path: '/contact'},
],
home: {
title: 'Be Relentless',
subTitle: 'Projects that make a difference',
text: 'Checkout my projects below'
},
about: {
title: 'About me'
},
contact: {
title: 'Let\'s talk'
}
}
}
render() {
return (
<Router>
<Container className='p-0' fluid={true}>
<Navbar className='border-bottom' bg="transparent" expand="lg">
<Navbar.Brand>My Name</Navbar.Brand>
<Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
<Navbar.Collapse id="navbar-toggle">
<Nav className="ml-auto">
<Link className="nav-link" to="/">Home</Link>
<Link className="nav-link" to="/about">About</Link>
<Link className="nav-link" to="/contact">Contact</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Footer />
</Container>
</Router>
)
}
}
export default App;
Footer.js
import React from 'react';
import Container from 'react-bootstrap/esm/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function Footer() {
return (
<Footer className="mt-5">
<Container fluid={true}>
<Row classNam="border-top justify-content-between p-3">
<Col className="p-0" md={3} sm={12}>
My name
</Col>
</Row>
</Container>
</Footer>
)
}
export default Footer;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
You are calling the Footer function within itself which causes the loop. Change the Footer function to the following:
function Footer() {
return (
<Container fluid={true}>
<Row classNam="border-top justify-content-between p-3">
<Col className="p-0" md={3} sm={12}>
My name
</Col>
</Row>
</Container>
)
}
Just change your footer to html or another tag for example:
import React from 'react';
import Container from 'react-bootstrap/esm/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function Footer() {
return (
<footer className="mt-5">
<Container fluid={true}>
<Row classNam="border-top justify-content-between p-3">
<Col className="p-0" md={3} sm={12}>
My name
</Col>
</Row>
</Container>
</footer>
)
}
I have been trying to dynamic display data depending on the ID from the app.js. I'm sending the ID correctly but the other page ins't receiving the ID
import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import Top from './top.js';
import Bottom from './bottom';
import Right from './right';
import Left from './left';
import Center from './center';
import About from './about';
import Help from './help';
import * as bs from 'react-bootstrap';
import { BrowserRouter as Router , Route, Switch} from "react-router-dom";
function App(props) {
return (
<Router>
<Container fluid className="p-0 min-vh-100 d-flex flex-column">
<Row fluid className = "flex-grow-0 flex-shrink-0 shadow-sm" >
<bs.Col className = "px-3 py-2">
<Top/>
</bs.Col>
</Row>
<Row noGutters className = "flex-grow-1">
<Col md="2" className ="px-3 py-4 shadow" style ={{backgroundColor: "#99CCCC"}}>
<Left/>
</Col>
<Col md="8">
<Switch>
<Route path ="/">
<Center />
</Route>
<Route path = "/product-detail/:{props.product.id}" >
<ProductsDetail/>
</Route>
</Switch>
</Col>
<Col md = "2" className = "px-3 py-4 shadow" style ={{backgroundColor: "#343a40"}}>
<Right/>
</Col>
</Row>
<Row fluid>
<Col className = "d-flex justify-content-center px-3 py-2" style ={{backgroundColor: "#28a745"}}><Bottom/></Col>
</Row>
</Container>
</Router>
)
}
export default App;
It sends the ID but now on the other page doesn't display the data that I want to use
import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import * as bs from 'react-bootstrap';
import { useParams} from "react-router";
function ProductsDetail(props) {
let {id}= useParams()
return (
<div>
<p>
Description: {id}
</p>
</div>
)
}
export default ProductsDetail;
I have been trying using useParams() but I don't correctly understand how am I suppose to grab the ID and display the information. Also, I have been using props to send the ID.
you are not passing the id to the component, you don't need to have from useParams if you pass it directly like this
App:
import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import Top from './top.js';
import Bottom from './bottom';
import Right from './right';
import Left from './left';
import Center from './center';
import About from './about';
import Help from './help';
import * as bs from 'react-bootstrap';
import { BrowserRouter as Router , Route, Switch} from "react-router-dom";
function App(props) {
return (
<Router>
<Container fluid className="p-0 min-vh-100 d-flex flex-column">
<Row fluid className = "flex-grow-0 flex-shrink-0 shadow-sm" >
<bs.Col className = "px-3 py-2">
<Top/>
</bs.Col>
</Row>
<Row noGutters className = "flex-grow-1">
<Col md="2" className ="px-3 py-4 shadow" style ={{backgroundColor: "#99CCCC"}}>
<Left/>
</Col>
<Col md="8">
<Switch>
<Route path = {"/product-detail/${props.product.id}"} >
<Center />
</Route>
<Route path = "/product-detail/:{props.product.id}" >
<ProductsDetail id={props.product.id}/>
</Route>
</Switch>
</Col>
<Col md = "2" className = "px-3 py-4 shadow" style ={{backgroundColor: "#343a40"}}>
<Right/>
</Col>
</Row>
<Row fluid>
<Col className = "d-flex justify-content-center px-3 py-2" style ={{backgroundColor: "#28a745"}}><Bottom/></Col>
</Row>
</Container>
</Router>
)
}
export default App;
ProductsDetail:
import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import * as bs from 'react-bootstrap';
import { useParams} from "react-router";
function ProductsDetail(props) {
let {id}= useParams()
return (
<div>
<p>
Description: {props.id}
</p>
</div>
)
}
export default ProductsDetail;
I have a material UI drawer and I can open it but when I try to close it the event is not even called.
import React from 'react';
import './App.css';
import { fade, makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import Typography from '#material-ui/core/Typography';
import InputBase from '#material-ui/core/InputBase';
import Badge from '#material-ui/core/Badge';
import MenuItem from '#material-ui/core/MenuItem';
import Menu from '#material-ui/core/Menu';
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import AccountCircle from '#material-ui/icons/AccountCircle';
import MailIcon from '#material-ui/icons/Mail';
import HomeIcon from '#material-ui/icons/Home';
import NotificationsIcon from '#material-ui/icons/Notifications';
import MoreIcon from '#material-ui/icons/MoreVert';
import InputAdornment from "#material-ui/core/InputAdornment";
import Drawer from '#material-ui/core/Drawer';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import ChevronRightIcon from '#material-ui/icons/ChevronRight';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import List from '#material-ui/core/List';
import Divider from '#material-ui/core/Divider';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
drawerOpen : false
};
this.handleDrawerOpen = this.handleDrawerOpen.bind(this);
this.handleDrawerClosed = this.handleDrawerClosed.bind(this);
}
handleDrawerOpen() {
this.setState({drawerOpen : true});
console.log("open");
}
handleDrawerClosed() {
this.setState({drawerOpen : false});
console.log("close");
}
render() {
return (
<div className={"topBar"}>
<AppBar >
<Toolbar className={"topBar"}>
<div className="divInside">
<IconButton
edge="start"
color="inherit"
onClick={this.handleDrawerOpen}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Top Questions
</Typography>
</div>
<div className={"divInside"} style={{"minWidth" : "50%"}}>
<SearchIcon />
<InputBase
fullWidth={true}
placeholder="Search…"
/>
</div>
<div>
<IconButton color="inherit">
<Badge badgeContent={22} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<IconButton
edge="end"
color="inherit"
>
<AccountCircle />
</IconButton>
</div>
</Toolbar>
</AppBar>
<Drawer
variant="persistent"
anchor="left"
open={this.state.drawerOpen}
>
<div onClick={this.handleDrawerClose}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>
{['Home', 'Categories'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index === 0 ? <HomeIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
</div>
);
}
}
What is the problem? I literally copied the example for persistent drawer from https://material-ui.com/components/drawers/
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
Your handler is called handleDrawerClosed but you are calling handleDrawerClose (without a 'd' on the end).
Update your handler to match the open handler and re-name it to handleDrawerClose
Also, use an IDE that will highlight problems like this for you automatically and save you time and frustration :-D
I am Learning the routing system in React . I checked everything in my code and it seems to be correct but I don't know why it does not work.
Versions:
"react-router-dom": "4.2.2",
"react": "^16.8.4",
index.js
We go to the App.js from index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
App.js
We implement BrowserRouter in App.js
import React, { Component } from 'react';
import { BrowserRouter} from 'react-router-dom';
import Main from './components/MainComponent';
import './App.css';
import { DISHES } from './shared/dishes';
class App extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
return (
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
);
}
}
export default App;
MainComponent.js
We define Routes in MainComponent.js
import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import { DISHES } from '../shared/dishes';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
const HomePage = () => {
return(
<Home />
);
}
return (
<div>
<Header />
<Switch>
<Route path='/home' component={HomePage} />
<Route exact path='/menu' component={() => <Menu dishes={this.state.dishes} />} />
<Redirect to="/home" />
</Switch>
<Footer />
</div>
);
}
}
export default Main;
HeaderComponent.js
NavBar, Nav in HeaderComponent.js
import React, { Component } from 'react';
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, Jumbotron } from 'reactstrap';
import { NavLink } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
this.toggleNav = this.toggleNav.bind(this);
this.state = {
isNavOpen: false
};
}
toggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen
});
}
render() {
return(
<div>
<Navbar dark expand="md">
<div className="container">
<NavbarToggler onClick={this.toggleNav} />
<NavbarBrand className="mr-auto" href="/"><img src='assets/images/logo.png' height="30" width="41" alt='Ristorante Con Fusion' /></NavbarBrand>
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<NavLink className="nav-link" to='/home'><span className="fa fa-home fa-lg"></span> Home</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/aboutus'><span className="fa fa-info fa-lg"></span> About Us</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/menu'><span className="fa fa-list fa-lg"></span> Menu</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/contactus'><span className="fa fa-address-card fa-lg"></span> Contact Us</NavLink>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
<Jumbotron>
<div className="container">
<div className="row row-header">
<div className="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
</div>
</div>
</Jumbotron>
</div>
);
}
}
export default Header;