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>
)
}
}
Related
Whenever I try to style Antd Design component ( Layout, Sider and so on ) but it doesn't seems to be working. Therefore there won't be any changes on them. But it works fine on other HTML elements like div, h1, p tags.
Here's my code:
.sidbar{
flex: 1;
background-color: red;
border-right: 0.5px solid rgb(218, 217, 217);
min-height: 100vh;
background-color: white;
}
import styles from "../styles/Sidebar.module.scss";
import React from "react";
import { Layout, Menu } from "antd";
const { Header, Content, Footer, Sider } = Layout;
import {
HomeOutlined,
DashboardOutlined,
TeamOutlined,
} from "#ant-design/icons";
import Link from "next/link";
const Sidebar = () => {
return (
<div>
<Layout className={styles.sidebar}>
<Header>header</Header>
<Layout>
<Sider>left sidebar</Sider>
<Content>main content</Content>
<Sider>right sidebar</Sider>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
);
};
export default Sidebar;
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.
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.
I'm using react-styled-components to style some custom components in my React/AntDesign application but the styles are not applied to my application.
When I tried reproducing the component in a clean codesandbox.io project the styles were applied successfully.
While some styled-components in my project do work this doesn't, what could be interfering with styled-components?
Here's the code:
import React from "react";
import "antd/dist/antd.css";
import styled from "styled-components";
import { FaMale, FaFemale, FaChild, FaUserFriends } from "react-icons/fa";
import { MdChildFriendly } from "react-icons/md";
import { Row, Col, Modal, Button } from 'antd';
class App extends React.Component {
state = { visible: false };
showModal = () => {
this.setState({
visible: true,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
ProductBtn = styled.div`
box-shadow: 0 0 15px rgba(0,0,0,0.1);
border: 1px solid #eee;
padding: 16px;
text-align: center;
border-radius: 5px;
cursor: pointer;
background-color: #fff
p {
margin-bottom: 0;
margin-top: 5px;
font-weight: bold;
}
`;
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>New Transaction</Button>
<Modal
title="New transaction"
visible={this.state.visible}
nOk={this.handleCancel}
onCancel={this.handleCancel}
>
<Row gutter={[16, 16]}>
<Col span={8}>
<this.ProductBtn onClick={this.handleProductClicked}>
<FaUserFriends style={{ fontSize: '24px' }} />
<p>Add couple</p>
<small>$70.00</small>
</this.ProductBtn>
</Col>
...
</Row>
</Modal>
</div>
)
}
}
export default App;
This is how it should look and how it looks in CodeSandbox:
This is how it looks in my application, without the widget/button-like styling on the ProductBtn styled component:
I created a simple react app to try and play with react-monaco-editor. Here is my code.
import React, { Component } from 'react';
import MonacoEditor from 'react-monaco-editor';
import './App.css';
const code = `
import React from "react";
class App extends React.Component {
render() {
return (
<span>I mean really come one</span>
);
}
}
export default App;
`;
class App extends Component {
onChange = (value) => {
console.log(value);
}
editorDidMount = (editor, monaco) => {
console.log('editorDidMount', editor);
editor.focus();
}
render() {
const options = {
selectOnLineNumbers: true
};
return (
<div className="App">
<MonacoEditor
height="600"
width="600"
language="javascript"
theme="vs-dark"
value={code}
onChange={this.onChange}
editorDidMount={this.editorDidMount}
/>
</div>
);
}
}
export default App;
For some reason tho, the text in the editor is showing up in the middle, and my cursor is as the start of line as expected.
Here is a screenshot of the issue.
This might be an old question but in React in the default App.css there is a line which sets the text-align to center.
If it looks similar to this:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #09d3ac;
}
you can just delete this part:
.App {
text-align: center;
}