Develop Reference

<Figure> not displaying in <div> container

I am new at react and am trying to build an app from a tutorial. I used the figure tag in the component but cannot see it in inspect element of chrome. Here are the codes.
The container in tutorial has tag as child. I am not getting that
Image from the tutorial containing div tag with figure tag as child element
My code with only div tag
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Main from './Components/Main'
import './styles/stylesheet.css'
ReactDOM.render(<Main/>, document.getElementById('root'));
ReactDOM.render(, document.getElementById('root'));
Main.js
import React, { Component } from 'react'
import Title from './Title'
import Photowall from './Photowall'
const posts = [{
id: "0",
description: "beautiful landscape",
imageLink: "https://image.jimcdn.com/app/cms/image/transf/none/path/sa6549607c78f5c11/image/i4eeacaa2dbf12d6d/version/1490299332/most-beautiful-landscapes-in-europe-lofoten-european-best-destinations-copyright-iakov-kalinin.jpg" +
"3919321_1443393332_n.jpg"
},
{
id: "1",
description: "Aliens???", imageLink: "https://s3.india.com/wp-content/uploads/2017/12/rocket.jpg"
},
{
id: "2",
description: "On a vacation!",imageLink: "https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2017/08/24/104670887-VacationExplainsTHUMBWEB.1910x1000.jpg"
}
class Main extends Component{
render(){
return <div>
<Title title={'Photowall'}/>
<Photowall posts={posts}/>
</div>
}
}
export default Main
Photowall.js
import React,{ Component} from 'react'
import Photo from './Photo'
class Photowall extends Component{
render() {
return
<div className='photo-grid'>
{this.props.posts.map((post,index)=> <Photo key={index} post={post}/>)}
</div>
}
}
export default Photowall
Photo.js
import React, {Component} from "react";
class Photo extends Component{
render(){
const post =this.props.post
return <figure className="figure"></figure>
}
}
export default Photo
Stylesheet.js
html{
font-size: 10px;
}
h1{
font-family: billabong;
text-align: center;
font-size: 13rem;
margin: 2rem 0rem;
font-weight: 400;
letter-spacing: 4px;
color: grey;
}
#font-face {
font-family: billabong;
src: url('https://fonts.cdnfonts.com/s/13949/Billabong.woff') format('woff');
}
.photo-grid {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.figure {
flex-basis: calc (33.333%-4rem);
border: 1px solid #d3d3d3;
padding: 2rem;
flex-grow: 1;
margin: 0 2rem;
}

Your Photowall HTML is dead code
Seems like your enitre Photowall component is not rendering itself.
The problem is that your HTML is not on the same line as return (becoming dead code).
If you put your HTML below your return is like you are returning undefined so the component doesn't render nothing.
You should always put your first HTML line right after return , not some line below.
class Photowall extends Component{
render() {
return <div className='photo-grid'>
{this.props.posts.map((post,index)=> <Photo key={index} post={post}/>)}
</div>
}
}
or wrapping your html between brakets (more readable in my opinion)
class Photowall extends Component{
render() {
return ( // starting from the same line as return
<div className='photo-grid'>
{this.props.posts.map((post,index)=> <Photo key={index} post={post}/>)}
</div>
)
}
}

import export styled component reactjs

i want to split page between styling and app
example
in page style.js
import styled from "styled-components";
//i dont know how to export all const
export const Container = styled.div`
display: flex;
flex-direction: row;
`;
export const Sidebar = styled.div`
width: 20%;
height: 100%;
background-color: #f9f9f9;
`;
and in page app.js
import * as All from "./style.js"
//i dont know, how to import all const in style.js
function App(){
return(
<Container>
<Sidebar>
</Sidebar>
</Container>
)}
how to export and import all const when const in style.js there are so many?

another option you can export like this :
import styled from "styled-components";
const Container = styled.div`
display: flex;
flex-direction: row;
`;
const Sidebar = styled.div`
width: 20%;
height: 100%;
background-color: #f9f9f9;
`;
export {Container,Sidebar}
and you can import like this :
import { Container,Sidebar } from './style';
function App() {
return (
<Container>
<Sidebar>
</Sidebar>
</Container>
);
}

There is a beautiful way to do that. This way also let you know which component is styled-component or single component.
// style.js
export const Styled = {
Container: styled.div`
display: flex;
flex-direction: row;
`,
Sidebar: styled.div`
width: 20%;
height: 100%;
background-color: #f9f9f9;
`,
}
import { Styled } from './style';
function App() {
return (
<Styled.Container>
<Styled.Sidebar>
</Styled.Sidebar>
</Styled.Container>
);
}

Dae Hyeon Mun's approach is great, but you can simplify it further and avoid having to refactor your styles.js file by using a wildcard import, which essentially creates a module object so you don't have to!:
// style.js
export const Container = styled.div`
...
`;
export const Sidebar = styled.div`
...
`;
// app.js
import * as Styled from './style';
function App() {
return (
<Styled.Container>
<Styled.Sidebar>
</Styled.Sidebar>
</Styled.Container>
);
}
More details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#creating_a_module_object

You can use "export const" like you already did for exporting. The simplest way to import those const is:
import * as styled from "./style.js"
//this will import all 'export const' containing 'styled' from "./style.js"
function App(){
return(
<Container>
<Sidebar>
</Sidebar>
</Container>
)}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

component style not taking precedence over global css in react app

I have a react app:
index.js
import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "#material-ui/styles";
import { CssBaseline } from "#material-ui/core";
import Themes from "./themes";
import App from "./components/App";
import * as serviceWorker from "./serviceWorker";
import { LayoutProvider } from "./context/LayoutContext";
import { UserProvider } from "./context/UserContext";
import { GridPaginationProvider } from "context/GridPaginationContext";
import { ConfirmDialogServiceProvider } from "context/ConfirmDialogContext";
import "bootstrap/dist/css/bootstrap.css";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-material.css";
ReactDOM.render(
<LayoutProvider>
<UserProvider>
<GridPaginationProvider>
<ConfirmDialogServiceProvider>
<ThemeProvider theme={Themes.default}>
<CssBaseline />
<App />
</ThemeProvider>
</ConfirmDialogServiceProvider>
</GridPaginationProvider>
</UserProvider>
</LayoutProvider>,
document.getElementById("root")
);
serviceWorker.unregister();
here's the modal component:
import React from "react";
import { Button } from "#material-ui/core";
import { Modal, ModalHeader, ModalBody } from "reactstrap";
import "./confirm-dialog.scss";
const ConfirmDialog = ({
modalOptions,
open,
title,
icon,
variant,
description,
buttonTexts,
onSubmit,
onClose
}) => {
return (
<Modal isOpen={open} toggle={onClose} {...modalOptions} zIndex={1201}>
<ModalHeader toggle={onClose}>{title}</ModalHeader>
<ModalBody>
<div className="dialog">
<div className="dialog-icon">
<img src={icon} alt="icon" />
</div>
<div className="dialog-content">{description}</div>
<div className="dialog-actions">
<Button variant="contained" color="primary" onClick={onSubmit}>
{buttonTexts && buttonTexts.ok}
</Button>
<Button variant="contained" color="secondary" onClick={onClose}>
{buttonTexts && buttonTexts.cancel}
</Button>
</div>
</div>
</ModalBody>
</Modal>
);
};
export default ConfirmDialog;
confirm-dialog.scss
.modal {
z-index: 1201 !important;
&-content {
border-radius: 20px;
}
&-body {
padding: 0 30px 40px;
}
}
.dialog {
text-align: center;
&-content {
font-size: 16px;
color: #272727;
padding: 22px 0;
}
&-actions {
button {
margin: 0 10px;
font-size: 14px;
font-weight: normal;
min-width: 110px;
}
}
}
The problem is the css in confirm-dialog.scss is not overriding the bootstrap.css's .modal-* classes.
I don't understand what's the problem. The confirm dialog component has its own styles which should override the CSS from .css files imported in index.js file. The modal get triggered by a custom react-hook. The same modal dialog is working in my other project but in this project, the global bootstrap CSS is taking precedence over the confirm-dialog's own .scss.

Nevermind, figured it out. I just had to move all .css imports before App.js import in index.js file.

Nav bar doesn't display when I use the <Link> tag

I changed the anchor tag to the Link tag and the whole component doesn't display. It is note worthy that I had used the anchor tag and it was properly rendered. However, after changing to the Link tag nothing gets displayed again. Below is what my code looks like:
Navbar component
import React, {Component} from 'react';
import { Link } from 'react-router';
class Navbar extends Component {
render() {
return (
<div className="Navbar">
<ul className="navbar-list">
<li className="active"><Link to={"/home"}>Home</Link></li>
<li><Link to={"/about"}>About Us</Link></li>
<li><Link to={"/pricing"}>Pricing</Link></li>
</ul>
</div>
)
}
}
export default Navbar
css
.navbar-list {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #333;
}
.navbar-list li{
float: left;
}
.navbar-list li Link {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar-list li Link:hover{
background-color: #111 ;
}
.active {
background-color: #4CAF50;
}
App.js file
class App extends Component {
render() {
return (
<div className="App">
<Navbar />
</div>
);
}
}
export default App;

There is some issue in Link from react-router
Instead try using
import { NavLink } from 'react-router-dom';
You code will look like this:
in dependencies of your package.json and do npm i: include:
"react-router-dom": "5.0.0",
import { BrowserRouter as Router } from "react-router-dom";
class App extends Component {
render() {
return (
<div className="App">
<Router>
<Navbar />
<Router>
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
class Navbar extends Component {
render() {
return (
<div className="Navbar">
<ul className="navbar-list">
<li className="active"><NavLink to={"/home"}>Home</NavLink></li>
<li><NavLink to={"/about"}>About Us</NavLink></li>
<li><NavLink to={"/pricing"}>Pricing</NavLink></li>
</ul>
</div>
)
}
}
export default Navbar;

Maybe you can try to change To prop on string like this :
<Link to="/pricing">Pricing</Link>
Another thing u can try is install react-router-dom instead of react-router.

Image in React component loading on one page but not the other one?

Hi guys very simple question. I have a home page and a room page. The question is why is the logo image in the navbar component loading in the homepage but not in the room page?
The home page is as follows:
import React from 'react';
import Hero from '../components/hero.js';
import NavBar from '../components/navbar.js';
import Services from '../components/services.js';
import FeaturedRooms from '../components/featuredRooms.js';
import Consultation from '../components/consultation.js';
import Footer from '../components/footer.js';
const Home = () => {
return (
<React.Fragment>
<NavBar/>
<Hero/>
<Services/>
<FeaturedRooms/>
<Consultation/>
<Footer/>
</React.Fragment>
);
}
export default Home;
The room page is basic right now and is only:
import React from 'react';
import NavBar from '../components/navbar';
import Footer from '../components/footer';
const RoomPage = () => {
return (
<React.Fragment>
<NavBar/>
<Footer/>
</React.Fragment>
);
}
export default RoomPage;
The route for the logo image is public/images/logo.png. I import the logo with src="images/logo.png" for an img as a styled component in my navbar component.
Both the homepage and the room page are in the same folder: src/pages/home.js and src/pages/singleRoom.js
The navbar is in the components folder as follows: src/components/navbar.js
Here is the navbar.js code:
import React from 'react';
import styled from 'styled-components';
import {Link} from 'react-router-dom';
import {LinkWithNoStyling} from './shared';
const Header = styled.header`
display: flex;
justify-content: flex-end;
padding: 10px 10%;
box-sizing: border-box;
background-color: rgb(251, 251, 251);
`;
const Logo = styled.img`
height: 30px;
/* explanation: margins top and bottom for flex child center vertically, given a margin right of auto and left of 0 we make it stick to the left. */
margin: auto auto auto 0;
`;
const UnorderedList = styled.ul`
list-style: none;
display: flex;
`;
const ListItem = styled.li`
margin-left: 35px;
`;
const MenuAnchor = styled.a`
text-decoration: none;
font-size: 1rem;
font-weight: bold;
color: black;
&:hover {
color: rgb(161, 113, 1);
}
`;
const Navbar = () => {
return (
<Header>
<Logo src="images/logo.png"/>
<nav>
<UnorderedList>
<ListItem>
<LinkWithNoStyling to="/">
<MenuAnchor href="">Home</MenuAnchor>
</LinkWithNoStyling>
</ListItem>
<ListItem>
<LinkWithNoStyling to="/rooms">
<MenuAnchor href="">Rooms</MenuAnchor>
</LinkWithNoStyling>
</ListItem>
</UnorderedList>
</nav>
</Header>
);
}
export default Navbar;
Finally, here is the App.js code:
import React from 'react';
import './App.css';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Home from './pages/home';
import NotFound from './pages/notFound';
import Rooms from './pages/rooms';
import RoomPage from './pages/roomPage'
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route path="/" component={Home} exact/>
<Route path="/rooms" component={Rooms} exact/>
<Route path="/room/:id" component={RoomPage} exact/>
<Route path="/" component={NotFound}/>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;

You're using a relative url for the src attribute on the Logo component. images/logo.png points relative to the current path, so for your home page, it points to <url>/images/logo.png, but for your room page, it points to <url>/room/:id/images/logo.png. If you change your src to /images/logo.png, then it will always point to the proper file. For more info about html file paths, check here.