I can't resolve this warning :
react-dom.development.js?ac89:67 Warning: Expected server HTML to contain a matching <i> in <a>.
at i
at a
at span
at footer
at div
Here is the component from which this warning originates:
import Head from 'next/head';
import Navbar from '../navbar/Navbar';
import React, { Component } from 'react';
import { initGA, logPageView } from '../../utils/analytics/analytics.js';
export default class Layout extends React.Component<{ title: string }> {
constructor(props) {
super(props);
}
componentDidMount() {
if (!window.GA_INITIALIZED) {
initGA();
window.GA_INITIALIZED = true;
}
logPageView();
}
render() {
return (
<>
<div>
<Head>
<title>{this.props.title}</title>
<link
rel="shortcut icon"
type="image/png"
href="/images/favicon.ico"
/>
<meta charSet="utf-8" />
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
/>
<link
href="https://fonts.googleapis.com/css?family=Bellota"
rel="stylesheet"
/>
</Head>
<header>{/* <span></span> */}</header>
<Navbar></Navbar>
{this.props.children}
<footer>
<span>Ricotec #Inc</span>
<span className="linkedIn">
<a href="//www.linkedin.com/in/radoslav-marinov-problem-solver/">
<i className="fab fa-linkedin-in fa-2x"></i>
</a>
</span>
</footer>
<style jsx global>{`
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
}
footer {
display: flex;
justify-content: center;
padding: 2em 0;
align-items: center;
}
hr {
padding: 0;
border-top: 0;
border-color: #ccc;
}
.fa-linkedin-in {
color: #0a66c2;
width: 26px;
}
.linkedIn {
margin: 0 1em;
}
`}</style>
</div>
</>
);
}
}
Please note that the warning comes from this part:
<a href="//www.linkedin.com/in/radoslav-marinov-problem-solver/">
<i className="fab fa-linkedin-in fa-2x"></i>
</a>
If I replace className="fab fa-linkedin-in fa-2x" with className="" the warning disappears. Something seems wrong with FontAwesome and Next.js' compatibility.
Related
<header>
<div class="max-width">
<h1>
<a href="./">
<img src="./assets/Logo.svg" alt="My Blog" />
</a>
</h1>
<ul>
<li class="profile-img">
<a href="#">
<img src="./assets/profile.jpg" alt="My Page" />
</a>
</li>
<li>
<a href="#" class="button">
<img src="./assets/icon-modify-white.svg" alt="" />
<span>Write</span>
</a>
</li>
<li>
<button class="button white">
<img src="./assets/icon-logout.svg" alt="" />
<span>Logout</span>
</button>
</li>
<li>
<a href="#" class="button gray">
<img src="./assets/icon-login.svg" alt="" />
<span>Login</span>
</a>
</li>
</div>
</header>
header {
background: var(--white-color);
}
header .max-width {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
padding: 1rem 0;
}
header h1 {
font-size: 3rem;
}
header h1 a {
display: block;
padding: 0.4rem;
margin-left: -0.4rem;
}
header h1 a img {
display: block;
}
header ul {
display: flex;
align-items: center;
gap: 1rem;
}
.profile-img a {
width: 4.4rem;
height: 4.4rem;
display: block;
border-radius: 50%;
}
.profile-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
header .button {
text-transform: none;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
height: 4rem;
padding: 0.2rem 1.2em 0;
border: 0;
border-radius: var(--border-radius);
background: var(--main-color);
color: var(--white-color);
text-transform: uppercase;
font-weight: bold;
line-height: 1;
}
.button img {
height: 1.2em;
margin-top: -0.2rem;
vertical-align: middle;
}
.button.gray {
background: var(--gray-background);
color: var(--black-color);
}
.button.white {
padding: 0.2rem 0.8em 0;
background: var(--white-color);
color: var(--black-color);
}
.button.white img {
height: 1.4em;
}
I'm trying to switch the HTML, CSS codes above to React Components with styled-components.
Developing into React components, I've had a Button component which is either a button or an a element and has the same className button
I have the similar issue with Styled Components - two different elements with the same styles and tried with the answer on it but didn't work so I posted a question.
Below is what I switched with the answer.
Header.jsx
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import {
HeaderContainer,
MaxWidth,
H1,
NavMyBlog,
Ul,
ProfileImg,
} from './Header.element'
import {
Button,
BtnGrey,
BtnWhite,
} from '../Button/Button'
export default function Header() {
return (
<HeaderContainer>
<MaxWidth>
<H1>
<NavMyBlog to="./">
<img src={require("../../assets/Logo.svg").default} alt="My Blog" />
</NavMyBlog>
</H1>
<Ul>
{/* <!-- 로그인 --> */}
<ProfileImg>
<Link to="#">
<img src={require("../../assets/profile.jpg").default} alt="My Page" />
</Link>
</ProfileImg>
<li>
<Link to="#" className="button">
<img src={require("../../assets/icon-modify-white.svg").default} alt="" />
<span>Write</span>
</Link>
</li>
<li>
<BtnWhite className="button white">
<img src={require("../../assets/icon-logout.svg").default} alt="" />
<span>Logout</span>
</BtnWhite>
</li>
{/* <!-- //로그인 --> */}
{/* <!-- 로그아웃 --> */}
<li>
<BtnGrey to="#" className="button gray">
<img src={require("../../assets/icon-login.svg").default} alt="" />
<span>Login</span>
</BtnGrey>
</li>
<li class="only-pc">
<a href="#" className="button gray">
<img src={require("../../assets/icon-register.svg").default} alt="" />
<span>Register</span>
</a>
</li>
{/* <!--// 로그아웃 --> */}
</Ul>
</MaxWidth>
</HeaderContainer>
)
}
Header.element.jsx
import styled from 'styled-components'
import { Link } from 'react-router-dom';
export const HeaderContainer = styled.header`
background: var(--white-color);
&.button {
text-transform: none;
}
`
export const MaxWidth = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
padding: 1rem 0;
`
export const H1 = styled.h1`
font-size: 3rem;
`
export const NavMyBlog = styled(Link)`
display: block;
padding: 0.4rem;
margin-left: -0.4rem;
img{
display: block;
}
`
export const Ul = styled.ul`
display: flex;
align-items: center;
gap: 1rem;
`
export const ProfileImg = styled.li`
Link{
width: 4.4rem;
height: 4.4rem;
display: block;
border-radius: 50%;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
`
Button.jsx
import styled, { css } from 'styled-components'
import { Link } from 'react-router-dom';
export const Button = css`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
height: 4rem;
padding: 0.2rem 1.2em 0;
border: 0;
border-radius: var(--border-radius);
background: var(--main-color);
color: var(--white-color);
text-transform: uppercase;
font-weight: bold;
line-height: 1;
img {
height: 1.2em;
margin-top: -0.2rem;
vertical-align: middle;
}
`
export const BtnGrey = styled(Link)`
background: var(--gray-background);
color: var(--black-color);
`
export const BtnWhite = styled.button`
${Button}
padding: 0.2rem 0.8em 0;
background: var(--white-color);
color: var(--black-color);
img {
height: 1.4em;
}
`
If someone can let me know if I'm using an improper format in order to load an image on react that would be amazing! I'm not an expert and any advice is greatly appreciated -- thank you in advance. The image that populates when I run the code just shows a broken img icon and when I try to run through the terminal it says that the image is called but not loaded.
import React, { Component } from "react";
import PropTypes from "prop-types";
import Logo from "/Users/mauromartineziii/aqua-financial/src/logo.png";
import "./App.css";
import Photo from "/Users/mauromartineziii/aqua-financial/src/pexels-photo-3560168.jpeg";
class App extends Component {
render() {
return (
<div>
<section>
<header>
<img
src="/Users/mauromartineziii/aqua-financial/src/logo.png"
width="333"
alt="Aqua Financial"
/>
<div>
<ul>
<li>Financial Services</li>
<li>Liquid Capital Asset</li>
<li>Retirement</li>
</ul>
</div>
</header>
</section>
<section id="main">
<img src="Photo"></img>
<div className="main-text">
<span>Learn What An LCA™ Can </span> <br /> Do For You <br />
</div>
<div className="right-text">
<span>Innovation Driven Banking</span>
</div>
<div>
{" "}
<button>Learn More</button>
</div>
</section>
</div>
);
}
}
export default App;
body {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
section {
margin: 0 120px;
}
header {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 50px;
}
header div {
margin-left: auto;
font-size: 20px;
}
header ul li {
display: inline-block;
margin: 0 20px;
}
#main {
margin: 0 120px;
margin-top: 200px;
display: grid;
grid-template-columns: 1fr 1fr;
}
#main .main-text {
font-size: 45px;
font-weight: 700;
line-height: 1.5;
}
`
It's a good idea to place the images you use in your project in the project directory and import them with a relative path, e.g:
import Logo from "./logo.png";
You also want to use the the resulting variables for your img tags.
<img
src={Logo}
width="333"
alt="Aqua Financial"
/>
// ...
<img src={Photo} />
I am trying to get my footer to stick to the bottom and not cover any body elements toward the bottom of the screen and I cannot seem to figure it out. Here is my footer.js
import React from "react";
import './Stylesheets/Footer.css';
import NavbarBrand from 'react-bootstrap/NavbarBrand';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
class Footer extends React.Component {
state = { clicked: false }
handleClick = () => {
this.setState({ clicked: !this.state.clicked })
}
render() {
return (
<footer className="footerItems">
<div className="phantom"></div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<i class="fab fa-2x fa-github"></i>
<i class="fab fa-2x fa-facebook-square"></i>
<i class="fab fa-2x fa-twitter-square"></i>
<i class="fab fa-2x fa-instagram"></i>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
)
}
}
export default Footer
I am trying to use a phantom <div> to force some additional spacing but that is not working. Here is the corresponding css file.
footer {
height: 80px;
margin-top: -200px;
bottom: 0;
z-index: 999;
}
.phantom {
display: 'block';
padding: '20px';
height: '60px';
width: '100%';
}
.footerItems {
position: fixed;
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
height: 100vh;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
color: #080202;
}
.wrapper a:nth-child(2) {
color: white;
}
.wrapper a:nth-child(3) {
color: #1DA1F2;
}
.wrapper a:nth-child(4){
color: #f24f1d;
}
.wrapper i:hover {
margin-top: -3px;
text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}
Any thoughts or suggestions??
THANK YOU
Here's a solution using position: sticky. The main things to note here is that the main div needs to be at least the height of the page, that way the top property can force it to the bottom. The bottom property then forces it to stay at the bottom even if scrolled past.
This doesn't remove the footer from affecting the height of the page, so it'll all be scrollable without issue.
The other thing to note is that this solution (as written) is based on knowing the height of the footer in advance, so I put a custom css property --footer-height: 60px to set that.
I'm not really sure why the icons and things don't show on the footer as given, but that's a different question
const { NavbarBrand, Navbar, Container } = ReactBootstrap;
class Footer extends React.Component {
state = {
clicked: false,
};
handleClick = () => {
this.setState({
clicked: !this.state.clicked,
});
};
render() {
return (
<footer className="footerItems">
<div className="phantom"> </div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<a href="http://www.github.com" target="_blank">
<i class="fab fa-2x fa-github"> </i>
</a>
<a href="http://www.facebook.com" target="_blank">
<i class="fab fa-2x fa-facebook-square"> </i>
</a>
<a href="http://www.twitter.com" target="_blank">
<i class="fab fa-2x fa-twitter-square"> </i>
</a>
<a href="http://www.instagram.com" target="_blank">
<i class="fab fa-2x fa-instagram"> </i>
</a>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
);
}
}
ReactDOM.render(
<div className="main">
<div className="content">Content!</div> <Footer />
</div>,
document.getElementById('root')
);
.main {
min-height: 100vh;
--footer-height: 60px;
}
.content {
height: 100vh;
background: linear-gradient(0deg, green 0%, white 100%);
}
footer {
height: var(--footer-height);
position: sticky;
top: calc(100vh - var(--footer-height));
bottom: 0;
}
.phantom {
display: block;
padding: 20px;
height: var(--footer-height);
width: 100%;
}
.footerItems {
/*position: fixed;*/
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
/*height: 100vh*/
;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js" crossorigin></script>
<div id="root" />
Hoping to get some help on an issue I have been having in Next js. I am using Fontawesome-react package for icon imports which is working fine but when I attempt to load in a google font style sheet into the head of my main component, it changes the fonts but makes the font awesome icons disappear. I have tried a couple of different solutions such as loading the font locally and utilizing _document and _app components but none fix the issue I am having. Everything ends up changing the font but still gets rid of all the font awesome icons from every part of my app. I will copy in the Nav component I have and the Layout component that holds everything.
Thank you for any help!
import React from 'react'
import Nav from './nav/Nav'
import Head from 'next/head'
import Footer from './Footer'
type Props = {
title?: string
}
const Layout: React.FC<Props> = ({ children, title = 'Macros' }) => {
return (
<div>
<Head>
<title>{title}</title>
<link
href="https://fonts.googleapis.com/css?family=Darker+Grotesque&display=swap"
rel="stylesheet"
/>
</Head>
<Nav />
<div id="pageContent">{children}</div>
<Footer />
<style jsx global>{`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: lighter;
font-family: 'Darker Grotesque', sans-serif;
}
#pageContent {
padding: 8rem 1rem;
}
`}</style>
</div>
)
}
export default Layout
import React, { useState } from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faBars, faSearch, faPlus } from '#fortawesome/free-solid-svg-icons'
import Link from 'next/link'
const NavBar: React.FC = () => {
const [navBarStatus, isOpen] = useState<Boolean>(false)
const toggleMenu = () => {
isOpen(navBarStatus ? false : true)
}
return (
<nav id="navContainer">
<div id="mobileNav">
<ul id="navBarTop">
<li>
<button type="button" className="navIcon" onClick={toggleMenu}>
<FontAwesomeIcon icon={faBars} />
</button>
</li>
<li>
<Link href="/">
<a>
<h3>Macro</h3>
</a>
</Link>
</li>
<li>
<button type="button" className="navIcon">
<FontAwesomeIcon icon={faSearch} />
</button>
</li>
</ul>
<ul id="navbarBottom">
<li>Top</li>
<li>New</li>
<li>Protein</li>
<li>Carbs</li>
<li>Fats</li>
</ul>
</div>
<div id="appDrawer">
<ul id="topIcons">
<li>
<button type="button" className="navIcon" onClick={toggleMenu}>
<FontAwesomeIcon icon={faBars} />
</button>
</li>
<li>
<button type="button" className="navIcon">
<FontAwesomeIcon icon={faPlus} />
</button>
</li>
</ul>
<nav>
<ul id="menuList">
<Link href="/">
<a>
<p>Home</p>
</a>
</Link>
<Link href="/">
<a>Favorites</a>
</Link>
<Link href="/">
<a>Notifications</a>
</Link>
<Link href="/">
<a>Login/Sign up</a>
</Link>
</ul>
</nav>
</div>
<style jsx>{`
#navContainer {
background-color: #504761;
color: white;
position: fixed;
width: 100%;
}
#navContainer a {
text-decoration: none;
color: white;
}
#mobileNav {
display: ${navBarStatus ? 'none' : ''};
}
#navBarTop {
color: white;
display: flex;
justify-content: space-between;
list-style: none;
padding: 1rem 1rem 0.5rem 1rem;
font-size: 1.5rem;
}
.navIcon {
color: white;
border: none;
background-color: #504761;
font-size: 1.5rem;
}
#navbarBottom {
display: flex;
list-style: none;
justify-content: space-evenly;
padding: 1rem 0;
}
#appDrawer {
display: ${navBarStatus ? 'block' : 'none'};
background-color: #504761;
height: 100vh;
}
#topIcons {
display: flex;
justify-content: space-between;
list-style: none;
padding: 1rem;
font-size: 1.5rem;
}
#menuList {
padding: 2rem 0 2rem 1rem;
display: flex;
flex-direction: column;
}
#menuList a {
font-size: 2rem;
margin: 1rem 0;
}
`}</style>
</nav>
)
}
export default NavBar
How put 'fontawesome' inside a react-datepicker in input? Library: react-datepicker. Is it possible? I tried used :after on class react-datepicker__input_container
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat="yyyy-MM-dd || HH:mm"
timeCaption="time"
/>
.react-datepicker__input_container:after {
color: red;
content: 'X';
display: inline-block;
padding: 0 5px;
width: 40px;
height: 100%;
position: absolute;
text-align: center;
top: 20%;
right: 0;
}
.react-datepicker__input_container input {
padding-right: 2.5rem;
text-align: center;
color: blue !important;
font-weight: 600 !important;
}
You can pass a custom input to DatePicker as a prop. create a custom input component with FA icon and pass it as a prop.
class CustomInput extends React.Component {
render() {
return (
<div className="wrapper">
<i onClick={this.props.onClick} aria-hidden="true" className="fa fa-calendar"></i>
<input onClick={this.props.onClick} className="dateInput" value={this.props.value} type="text" />
</div>
)
}
}
CSS
.wrapper { position: relative; }
i.fa-calendar { position: absolute; top: 1px; left: 5px; }
.dateInput {
padding-left: 20px;
}
Demo
Example
.wrapper { position: relative; }
i.fa-calendar { position: absolute; top: 1px; left: 5px; }
.dateInput {
padding-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="root"></div>
<script type="text/babel">
class CustomInput extends React.Component {
render() {
return (
<div className="wrapper">
<i onClick={this.props.onClick} aria-hidden="true" className="fa fa-calendar"></i>
<input onClick={this.props.onClick} className="dateInput" value={this.props.value} type="text" />
</div>
)
}
}
ReactDOM.render(
<CustomInput value='19-12-16, 02:00' />,
document.getElementById('root')
);
</script>