React Bootstrap issue - javascript

The grid system don't work maybe i'm dumb but i don't understand, my code :
import React from "react";
import {Col, Row} from "react-bootstrap";
const Home = () => {
return (
<Row className="home">
<Col xs={6}>2 of 3 (wider)</Col>
<Col xs={6}>3 of 3</Col>
</Row>
)
}
export default Home;

You should import bootstrap css in your project
import 'bootstrap/dist/css/bootstrap.min.css'

Try to add the bootstrap CDN link in the index.html in the public folder.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Reference https://getbootstrap.com/docs/3.3/getting-started/

Related

Is there a way I can fix my header component to stop displaying blank due to react router version 6.4.3?

**I learnt React router version 5 but I do not understand how version 6.4.3 works
App.js
import React from 'react';
import './App.css';
import Header from './Header';
function App() {
return (
<div className="app">
<Header/>
</div>
);
}
export default App;
Header.js
import React, {useState} from 'react'
import './Header.css';
import MenuIcon from '#mui/icons-material/Menu';
import SearchIcon from '#mui/icons-material/Search';
import VideoCallIcon from '#mui/icons-material/VideoCall';
import AppsIcon from '#mui/icons-material/Apps';
import NotificationAddIcon from '#mui/icons-material/NotificationAdd';
import { Avatar } from '#mui/material';
import { Link } from "react-router-dom";
function Header() {
const [inputSearch, setInputSearch] = useState('');
return (
<div className='header'>
<div className='header_left'>
<MenuIcon />
<Link to='/'>
<img
className='header_logo'
src='https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg'
alt='' />
</Link>
</div>
<div className='header_input'>
<input onChange={(e) => setInputSearch(e.target.value)}
value={inputSearch}
type='text' placeholder='Search'/>
<Link to={`/search/${inputSearch}`}>
<SearchIcon className='header_inputbutton' />
type here
</Link>
</div>
<div className='header_icons'>
<VideoCallIcon className='header_icon' />
<AppsIcon className='header_icon'/>
<NotificationAddIcon className='header_icon'/>
<Avatar src='' alt='Igbe Ajaga'/>
</div>
</div>
)
}
export default Header
I tried to use react router but the Header component which has react router imported is displaying a blank white space on my browser while the other components without react router are displaying correctly.**

Error: React.Children.only expected to receive a single React element child. while adding navebar

my code is showing error when i try to add the navbar
I tried shifting it to index another way please recommend
I cant understand the Error: React.Children.only expected to receive a single React element child.
app.js
import Navbar from '../components/Navbar';
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return (
<>
<Navbar/>
<Component {...pageProps} />
</>
);
}
export default MyApp;
index,js
import Head from "next/head";
import Hero from "../components/Hero";
export default function Home() {
return (
<div>
<Head>
<title>Amazon 2.0</title>
</Head>
<Hero heading='reclaming our planet' />
</div>
);
}
navbar
import React from 'react'
import Link from 'next/link'
function Navbar() {
return (
<div>
<Link href='/'></Link>
<h1>capture</h1>
<Link/>
<ul>
<li>
<Link href='/'>Home</Link>
</li>
<li>
<Link href='/save'>Save</Link>
</li>
<li>
<Link href='/contact'>contact</Link>
</li>
</ul>
</div>
)
}
export default Navbar

React bootstrap - Invalid hook call

I am using Bootstrap with ReactJS in order to learn the latter.
I want to diplay a Bootstrap Navbar in my app.
My code is the following:
app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";
function App() {
return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">
<img
alt=""
src="####"
width="30"
height="30"
className="d-inline-block align-top"
/>
// {' React Bootstrap'}
</Navbar.Brand>
</Navbar>
</div>
);
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<!-- BOOTSTRAP -->
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>My app</title>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>
index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
But I get:
Invalid hook call. Hooks can only be called inside of the body of a function component
I did some research and people suggest that the error is caused by different version of React.
So I run npm ls react but I get only one version:
myapp-frontend#0.1.0 /Desktop/myapp-frontend
└── react#16.10.2
As suggested in comment, if I run npm ls react-dom I get this:
myapp-frontend#0.1.0 /Desktop/myapp-frontend
└── react-dom#16.10.2
Can you remove this out of your code please
// {' React Bootstrap'}
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";
function App() {
return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">
<img
alt=""
src="####"
width="30"
height="30"
className="d-inline-block align-top"
/>
</Navbar.Brand>
</Navbar>
</div>
);
}
export default App;
I think the error is coming from that line

<Link> not transmitted in children

I work on a dashboard project at my job and I'm need your help.
React, nextjs and material-ui are used in my application.
On this website, a Menu is defined with clickable links for navigate between page.
However, I can not use correctly <Link> from next/link.
In my application, I need to use <Link/> with something like that:
import Foo from './foo';
[...]
<Link href="/about" passHref>
<Foo />
</Link>
[...]
<Foo/> is defined in another file and contain a <a>.
Even if I pass passHref my link can't be clicked.
In real life, my application is more complicated and use material-ui but the problem seems to be present with this really simplified version : https://gist.github.com/Oyabi/4aea0ce2fa36029868641d147ba9e551
Here the code if gist is down or removed in future:
pages/index.jsx:
import React from "react";
import Menu from "../components/Menu";
function Home() {
return <Menu />;
}
export default Home;
components/Menu.jsx:
import React from "react";
import Link from "next/link";
import MenuItem from "./MenuItem";
function Menu() {
return (
<Link href="/about" passHref>
<MenuItem />
</Link>
);
}
export default Menu;
components/MenuItem.jsx:
import React from "react";
import Link from "next/link";
function MenuItem() {
return (
<div>
<a>not ok - link is not clickable even if the following lines are commented</a>
<br />
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<div className="useless">
foo
<a>even with something more complicated</a>
<br />
<a>the 2 links are clikable</a>
bar
</div>
</Link>
</div>
);
}
export default MenuItem;
If I surround my <a> between <Link> in the same file everything is ok and work as desired but it's not the case if I apply <Link> on a component.
As you can see, even if I setpassHref.
How can I make my <Link> works in Menu.jsx?
Regards.
Try replacing the surrounding div by a fragment like that:
function MenuItem() {
return (
<> // here
<a>not ok - link is not clickable even if the following lines are commented</a>
<br />
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<div className="useless">
foo
<a>even with something more complicated</a>
<br />
<a>the 2 links are clikable</a>
bar
</div>
</Link>
</> // and here
);
}

Does not load the Navbar component, react-bootstrap

I am starting in React.js and I find this problem when making a navigation menu. It does not generate the menu effect that is expected, here is the code:
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import { Navbar, Nav, NavItem} from 'react-bootstrap';
export class Menu extends Component {
render(){
return (
<Navbar>
<Nav>
<NavItem componentClass= {Link} href="/" to="/" >
Inicio
</NavItem>
<NavItem componentClass= {Link} href="/Pelicula" to="/Pelicula" >
Pelicula
</NavItem>
</Nav>
</Navbar>
);
}
}
export default Menu;
This is the result
It is divided into two components, the top part is the Menu component and the bottom component, Greeting, but the one of my interest is the menu
I hope your help
Ensure you include stylesheets
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
React-bootstrap - Getting Started
Wrap your NavItem in BrowserRouter
import React from 'react';
import React, { Component } from 'react';
import { Link, BrowserRouter } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
export class Menu extends Component {
render() {
return (
<Navbar>
<Nav>
<BrowserRouter>
<NavItem componentClass={Link} href="/" to="/">Inicio</NavItem>
</BrowserRouter>
<BrowserRouter>
<NavItem componentClass={Link} href="/Pelicula" to="/Pelicula">Pelicula</NavItem>
</BrowserRouter>
</Nav>
</Navbar>
);
}
}
export default Menu;
Stackblitz

Categories

Resources