Second component not rendering below first one - REACT JS - javascript

I am making a personal website. The landing page is the first component. The second page is the About component but it is not rendering below the landing component. It is appearing at the top.
App.js file:
import "./App.css";
import Landing from "./components/Landing/Landing";
import About from "./components/About/About";
function App() {
return (
<div className="App">
<Landing/>
<About/>
</div>
);
}
export default App;
**App.css file: **
.App{
display: flex;
flex-direction: column;
}
body{
overflow-x: hidden;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-track{
background: black;
border-radius: 1ex;
}
::-webkit-scrollbar-thumb{
background: #427898;
border-radius: 1ex;
}
::-webkit-scrollbar-corner {
background: black;
}
a{
text-decoration: none;
color: inherit
}
About.jsx file:
import React from 'react'
import css from "./About.module.css"
const About = () => {
return (
<div style={{ color: 'white' }}>About</div>
)
}
export default About
I have already tried creating a container class for About and then changing the display in my About.module.css file but the About text still remains at the top of the page unseen.This is the landing page and as you can see I want the About component to now be below the landing page as you scroll down.

Related

cannot render any of my code to my react-appliaction

I am making a Typescript and React app. I am using 4 main files, App.tsx, Header.tsx, Ap.css. I think the real problem is the way I am trying to use the add the Header.tsx file to App.tsx.
Please help
App.tsx:
import React from "react";
import Header from "./Header";
import "./App.css";
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
Header.tsx:
import React from "react";
import "./Header.css";
function Header() {
return (
<div className="nav-container">
<nav>
Home
About
Projects
Resume
</nav>
</div>
);
}
export default Header;
App.css:
.App {
text-align: center;
color: white;
}
body {
background-color: #171A25;
color: #ffffff;
}
Header.css:
body {
margin: 0px;
background-color: #121625;
}
.nav-container {
text-align: center;
font-size: 24px;
color: white;
}
It looks like there is nothing wrong with your import method. I think you should check your webpack.config.js file. In resolve part should contain ts and tsx types.
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
and also you have to add tsconfig.json file to your project.
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
https://webpack.js.org/guides/typescript/

How can I use className in component from styled-components in React?

NavStyles.js
import styled from 'styled-components';
export const Nav = styled.navwidth: 100%; ;
export const NavMenuMobile = styled.ul`
height: 80px;
.navbar_list_class {
font-size: 2rem;
background-color: red;
}
${props => props.navbar_list_props && `
font-size: 2rem;
background-color: gray;
`}
`;
Navbar.js
import React from 'react'
import {Nav, NavMenuMobile} from "./NavStyles";
const Navbar = () => {
return (
<Nav>
{/* work no problem */}
<NavMenuMobile navbar_list_props>Nav Bar props</NavMenuMobile>
{/* not work How to use..? */}
<NavMenuMobile className="navbar_list_class">Nav Bar class</NavMenuMobile>
</Nav>
)
}
export default Navbar
<Nav>
<NavMenuMobile className={navbar_list_props}>Nav Bar props</NavMenuMobile>
</Nav>
Try This
Looks like you are setting styles for the children within NavMenuMobile with the class "navbar_list_class".
Should work with &.navbar_list_class
export const NavMenuMobile = styled.ul`
height: 80px;
&.navbar_list_class {
font-size: 2rem;
background-color: red;
}
`;

Styled Component v5.3 createGlobalStyles not Working

I'm trying to create Global Styles for my application using createGlobalStyles but somehow the components are not rendering and I am getting a console warning.
App.js
import GlobalStyles from "./styles/GlobalStyles";
function App() {
return (
<div className="App">
<GlobalStyles>
<h1>This is a test line</h1>
</GlobalStyles>
</div>
);
}
export default App;
GlobalStyles.js
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
html {
font-size: 8px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-weight: 200;
}
body {
font-size: 8px;
}
h1 {
font-size: 2rem;
}
`;
export default GlobalStyles;
Console Error[enter image description here][1]
GlobalStyle.js:28 The global style component sc-global-dtGiqY was given child JSX. createGlobalStyle does not render children.
Error Screenshot
https://i.stack.imgur.com/QJBLz.png
Place <GlobalStyles /> as a sibling to your other content—not as a parent element trying to accept children.
<div className="App">
<GlobalStyles />
<h1>This is a test line</h1>
</div>

Scroll is skipping header and starting from body

When site is loading, page starts from body and I have to scroll up to see styled header.
(But this problem does not appear on all browsers)
I want to start scrolling with the Header.
Here is the live site: http://pavlorishko228-001-site1.btempurl.com/
Code:
import React from "react";
import { Link } from 'react-router-dom';
import styled from "styled-components";
import ScrollHandler from "../../components/ScrollHandler";
import Logo from '../../public/SmokeyWayLogo.svg';
const StyledLogo = styled("img")<{isScrolled: boolean}>`
filter: ${props => props.isScrolled ? "invert(1)" : "drop-shadow(2px 4px 3px black)"};
height: 80px;
padding-left: 0;
float: left;
`;
const StyledLink = styled("div")<{isScrolled: boolean}>`
padding: 20px;
margin: 10px;
display: inline-block;
border-radius: 5px;
&:hover {
box-shadow: 0px 0px 15px 2px ${props => props.isScrolled ? "white" : "black"};
color: black;
}
a {
text-decoration: inherit;
color: ${props => props.isScrolled ? "white" : "black"};
}
`;
const StyledNav = styled("div")<{isScrolled: boolean}>`
position: fixed;
width: 100%;
background-color: ${props => props.isScrolled ? "transparent " : "white"};
`;
function Header(){
const _isScrolled = ScrollHandler();
return(
<header>
<StyledNav isScrolled={_isScrolled}>
<StyledLogo isScrolled={_isScrolled} src={Logo}></StyledLogo>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Smokey Way</Link>
</StyledLink>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Головна</Link>
</StyledLink>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Меню</Link>
</StyledLink>
</StyledNav>
</header>
)
}
export default Header;
I used chrome on my device and was fine, I mean i saw your header after loading the page.
Your problem is not normal and its kinda weird for me, But i suggest you JS (in this code before loading page it makes you to be sure that you are at the top of the current page) and give me the feedback:
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});

how to apply width to css flexbox

Rendering a list of titles and trying to give them width or flex but it's not working default width of 133px is used by tag but works on static data only min-width is working. How can I use flex or width to my tag?
import React, { Component } from "react";
import { NavLink, BrowserRouter } from "react-router-dom";
import "./chooseCategory.scss";
import { categoryList } from "./categoryList";
import axios from "axios";
class chooseCategory extends Component {
state = {
recdata: [],
};
async componentDidMount() {
let data = await axios.get(`https://jsonplaceholder.typicode.com/posts`);
this.setState({
recdata: data.data,
});
}
render() {
console.log(this.state.recdata);
return (
<div className="chooseCategory">
{this.state.recdata.map((title) => (
<p className="categoryLink">{title.title}</p>
))}
</div>
);
}
}
export default chooseCategory;
.chooseCategory {
display: flex;
flex-flow: row nowrap;
overflow: scroll;
.categoryLink {
width: 200px;
margin-right: 10px;
border: 1px solid black;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
You should add flex-shrink: 0 to .categoryLink.
Here is a working example: https://codesandbox.io/s/snowy-sun-elo7d?file=/src/App.js

Categories