We Keep Coding

Second component not rendering below first one - REACT JS

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.

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;
}
`;

Why I can't pass simple props in React..From parent to child

I am a beginner of React.
I'm practicing using React to pass props from parent to child.
but.I can't pass props.
I just want to pass simple props from parent to child.
My code is here.
https://codesandbox.io/s/props-test-3bgjy?file=/src/Child.js
My code is not showing the error.
But my code doesn't display correctly.
import React, { Component } from "react";
import styled from "styled-components";
import Child from "./Child";
const Button = styled.button`
font-size: 16px;
padding: 16px;
`;
class App extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
msg: "state(msg)initial",
flg: true
};
this.doAction = this.doAction.bind(this);
}
doAction() {
this.setState((state) => ({
counter: state.counter + 1,
msg: state.counter,
flg: !state.flg
}));
}
render() {
return (
<div>
<Child msg={this.state.message} flag={this.state.flag} />
<Button onClick={this.doAction}>Click</Button>
</div>
);
}
}
export default App;
import React, { Component } from "react";
import styled from "styled-components";
const Message = styled.p`
font-size: 24pt;
color: #900;
margin: 20px 0px;
padding: 5px;
border-bottom: 2px solid #900;
&[data-primary="true"] {
font-size: 24pt;
color: white;
background-color: #900;
margin: 20px 0px;
padding: 5px;
border-bottom: 2px solid #900;
}
`;
class Child extends Component {
render() {
return (
<div>
<Message data-primary={this.props.flag}>
count: {this.props.msg}
</Message>
</div>
);
}
}
export default Child;

You are have mistake in line <Child msg={this.state.message} flag={this.state.flag} />
Need use state param msg
<Child msg={this.state.msg} flag={this.state.flag} />
https://codesandbox.io/s/props-test-forked-gw69r?file=/src/Parent.js

It looks like you have a typo; change this line:
<Child msg={this.state.message} flag={this.state.flag} />
to
<Child msg={this.state.msg} flag={this.state.flg} />

Styled Component Custom CSS in ReactJS

I'm actually having trouble doing CSS with the styled component in React. Given below is the code snippet
import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';
const Styles = styled.div`
.navbar {
background-color: black;
position: absolute;
bottom: 0;
width: 100%;
}
.h1 {
color: white;
}
`;
const Footer = () => {
return (
<Styles>
<Navbar>
<Container>
<Row>
<Col sm={{ size: 4 }}>
<h1>Hi</h1>
</Col>
</Row>
</Container>
</Navbar>
</Styles>
);
};
export default Footer;
What I want to do is to change the color of the h1 tag to white but the above custom CSS is not working. I've tried background-color too, but still the issue persists.

With styled-components, you shouldn't use classes for styling elements. You should use separated wrappers for components, it's the main point. I think you wanted to do something like this:
import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';
const StyledNavbar = styled(Navbar)`
background-color: black;
position: absolute;
bottom: 0;
width: 100%;
`;
const Header = styled.h1`
color: white;
`;
const Footer = () => {
return (
<StyledNavbar>
<Container>
<Row>
<Col sm={{ size: 4 }}>
<Header>Hi</Header>
</Col>
</Row>
</Container>
</StyledNavbar>
);
};
export default Footer;

you used .h1 the class, not h1 the tag, in your css.
https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

Blank page when deploying React website on Netlify

I'm trying to deploy my personal website using React but it's showing a blank page with the following error on the React imports. It works fine on a local host. I've wasted an entire day trying to solve it but with no success. Any ideas on what might be the issue? Thanks in advance.
Error: "Unexpected identifier 'React'. import call expects exactly one argument" on first line
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
// import injectGlobal helper
import { injectGlobal } from 'styled-components';
import Main from './app/Main';
// Global style
injectGlobal`
html,
body,
#app,
.wrapper {
min-height: 100vh;
height: 100%;
}
html {
box-sizing: border-box;
font-size: 100%;
}
* {
&,
&::after,
&::before {
box-sizing: inherit;
}
}
body {
padding: 0;
margin: 0;
font: 1rem / 1.414 Roboto;
}
`
const wrapper = document.getElementById('app')
const App = () => (
<BrowserRouter>
<Main />
</BrowserRouter>
)
ReactDOM.render(<App />, wrapper)