Develop Reference

How do I make a Bootstrap Icon appear?

I am new to Bootstrap and I'm building a login screen for an app. I want to use the the MDBIcons for google, twitter and facebook. I followed the documentaion here https://mdbootstrap.com/docs/b5/react/components/buttons/
However, when I view my webpage I can't see the icons. I only a small button in the color of the brand. My code for the google icon button looks like this
import "./App.css";
import React from "react";
import { MDBIcon, MDBBtn } from 'mdb-react-ui-kit';
const SignIn = () => {
return (
<>
<MDBBtn
className="m-1"
style={{ backgroundColor: "#dd4b39" }}
href="#"
>
<MDBIcon fab icon="google" />
</MDBBtn>
</>
);
};
The picture above is what I see, there is no Google logo in the button. I am using React and running 'npm start' to view my webpage on chrome.
Any help would be appreciated.

Did you add style in the public/index.html file? Info about it is here. React MDB Installation Guide.
I mean this:
link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>
If not, try adding this into your index.html file's "head" section.

Basic classNames not working in new React App

Just created a new react app using 'npx create-react-app my-app' (so the webpack and all modules were configured for me) and none of my classNames are being implemented. In case it was something I was doing wrong, I tried copying and pasting basic ones like the navbar examples from react-bootstrap.
It's displaying the text for the navbar but none of the styling. Anyone run into this or have an idea of what could be the problem?
import React from 'react';
import ReactDOM from 'react-dom';
import { Container, Nav, Navbar } from 'react-bootstrap';
function App() {
return (
<Container>
<Navbar bg="dark" variant="dark">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Navbar>
<>
<div className="d-flex flex-row">
<div className="p-2">Flex item 1</div>
<div className="p-2">Flex item 2</div>
<div className="p-2">Flex item 3</div>
</div>
</>
</Container>
);
}
export default App;

Have you installed react-bootstrap? If not just enter
npm install react-bootstrap
It will then install all the necessary files.

Some stylesheets are required to use these components. So you should define it as below.
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';

react bootstrap dropdown doesn't close when react router link gets called

<NavDropdown
className="userDropdownButton"
title="dropdown"
id="user-nav-dropdown"
alignRight
>
<div className="userDropDown">
<Link to="/user" className="userDropDownheader">
user
</Link>
</div>
</NavDropdown>
And both - the dropdown and the <Link> work just fine, but the dropdown doesn't close when I click on the link. I tried using https://github.com/react-bootstrap/react-router-bootstrap but it didn't fix my issue. Are there some other things I could try?

npm install react-router-bootstrap
then in your nav page :
import { LinkContainer } from "react-router-bootstrap";
<NavDropdown title='Dropdown' id='responsive-navbar-nav'>
<LinkContainer to='/views/Page4' >
<NavDropdown.Item>Counter</NavDropdown.Item>
</LinkContainer>
</NavDropdown>
Im using https://react-bootstrap.github.io/components/navbar/
Hope you can use LinkContainer to solve your problem.

Nextjs Router.push vs href

For Routing to some page on click, I can achieve it in two ways
import Router from 'next/router'
<button onClick={() => Router.push('/about')}>
<a>Go to About</a>
</button>
And
<button>
Go to About
</button>
Which one is the best practice in Nextjs?

a tag inside button is not allowed in semantic html, both of them are interactive elements.
For links, Next provides Link component that accepts a tag as a child.
For buttons, use <button onClick={() => Router.push('/about')}>text</button> without a.

The best way to create links between pages is to use your nextjs package.
import Link from "next/link";
Then use it like that
<Link href={'/'} params={'id': 1}>
<a>link</a>
</.Link>
if useing node js router href linked by name route

For the best user experience I would suggest a third option / best practice:
import Link from "next/link";
<Link href={"/within/your/page"} passHref>
<button>go</button> // or any other element
</Link>
pre NextJS 10 if your path had dynamic segments you would need to pass "as" also like:
import Link from "next/link";
<Link href={"/review/[id]"} as={"/review/12"} passHref>
<button>go</button> // or any other element
</Link>
The Link Component / the router.push enables client side navigation. This makes navigating your website a lot faster.
you can read more on this here:
https://nextjs.org/docs/api-reference/next/link
https://nextjs.org/docs/api-reference/next/router

How to add image in Navbar in react-materialize?

I have the following code in ReactJS where I am using react-materialize for UI.
import {Logo} from './logo.png';
<Navbar brand='logo' right>
<NavItem href='get-started.html'>Getting started</NavItem>
<NavItem href='components.html'>Components</NavItem>
</Navbar>
How do I replace brand with an image? I tried the following:
brand={Logo}
src={Logo}
But it doesn't work. Is there a solution for this?
Solved:
Declare a variable with the HTML div as follows:
var Img = <img src={ImportedImage}/>
and further assign it to brand on the Navbar as follows:
<Navbar brand={Img} ...../>
The reason that brand={Logo} didn't work is that it wasn't an HTML image form and hence showed a random text on the web browser.