I'm trying to decide what menubar to use and I'm testing react-site-nav which I found it to be one the best menubars in this review.
But I need submenus and all content of the submenus is shifted to the left side of the screen making the contents unaccessible.
I tried a simple example like this:
import React, { Component } from "react";
import { Switch, Link, Route } from "react-router-dom";
import SiteNav, { ContentGroup } from "react-site-nav";
import "./styles.css";
export default class App extends Component {
render() {
return (
<div>
<SiteNav>
<ContentGroup title="About" height="200">
<SiteNav>
<ContentGroup title="Test" height="200">
test
</ContentGroup>
</SiteNav>
</ContentGroup>
</SiteNav>
</div>
);
}
}
Here is a test sandbox where you can see the problem: https://codesandbox.io/s/react-site-nav-mwjkef
Related
I'm following a video course on React, and it is showing us the basics of creating a shopping cart that will eventually look something like this:
I am still early in the course. I am building a component and setting the attributes. Right now, it should just show "Zero" and have the word "Increment" on the button. The problem is, I cannot see the word "Zero" in the Chrome browser. Chrome shows that the word is there, though:
Here is my React code for counter.jsx:
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
class Counter extends Component {
state = {
count: 0
};
styles = {
fontSize: 30,
fontWeight: 'bold',
};
render() {
return (
<div>
<span style={this.styles} className='badge badge-primary m-2'>{this.formatCount()}</span>
<button className='btn btn-secondary btn-sm'>Increment</button>
</div>
);
}
formatCount() {
const { count } = this.state;
return count === 0 ? 'Zero' : count;
}
}
export default Counter;
It is called in index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Counter />
</React.StrictMode>
);
The course has a forum, and I asked a question about this yesterday >> HERE <<, but there has been no answer, and I cannot continue building the project with the 1st step not working.
Can someone point out what it is that I did wrong?
Also, I personally think that the formatCount() function should declare count as:
formatCount() {
const { count } = this.state.count;
return count === 0 ? 'Zero' : count;
}
But, that makes it so that the text "Zero" no longer appears in the Chrome debugger. Why?
(I included the bootstrap tag because the index page uses bootstrap, and it could be doing something that is hiding my text)
this is my files, in my Sidebar.js that is in the component folder, i need to import sidebar.css from styles folder, components and styles are in parent folder sidebar.
pls give me a solution
Seems, you are looking for this: import "../styles/sidebar.css" ?
Try this way
sidebar.css
import { StyleSheet, Platform } from "react-native";
export const sidebar = StyleSheet.create({});
Sidebar.js
import { sidebar } from "../styles/sidebar";
class Sidebar extends React.Component {
clickMe() {
alert("Hi!");
}
render() {
return (
<div className="box" onClick={this.clickMe.bind(this)}>
Hello {this.props.name}. Please click me.
</div>
);
}
}
I am using React cards to show dynamic cards. I wanted to show 4 cards for desktop view at one row and 1 card for the mobile view but it is always coming vertically no cards are shown horizontally
The Container Component Of The card
import React from 'react'
import SongCard from '../SongCard'
import {
CardDeck
} from 'reactstrap';
function Popular({ popular }) {
return (
<div>
{popular.map((post) =>
<div key={post.etag}>
{
<CardDeck style={{display: 'flex', flexDirection: 'row',justifyContent: 'right'}}>
<SongCard
Title={post.snippet.title}
VideoId={post.id.videoId}
Image={post.snippet.thumbnails.high.url}
ChannelTitle={post.snippet.channelTitle} />
</CardDeck>
}
</div>)
}
</div>
)
}
export default Popular
And the card component is
import React from 'react'
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle
} from 'reactstrap';
function SongCard({ Title, VideoId, Image, ChannelTitle }) {
return (
<div>
<Card style={{maxWidth:'30em',flex: '1'}}>
<CardImg top width="100%" src={Image} alt="image" />
<CardBody>
<CardTitle>{Title}</CardTitle>
<CardSubtitle>{ChannelTitle}</CardSubtitle>
<CardText></CardText>
</CardBody>
</Card>
</div>
)
}
export default SongCard
First, in SongCard you might not need to encapsulate your card component in a div, it make your style for Card kind of unavailable because the div is by default full Width.
Secondly, CardDeck should be outside of the map loop cause you create a new CardDeck each post and it might not be what you want. to put you "key={post.etag}" directly in SongCard instead.
I also don't recommend to add custom style in style in CardDeck because you will break the default layout for all devices.
import React from 'react'
import SongCard from '../SongCard'
import {
CardDeck
} from 'reactstrap';
function Popular({ popular }) {
return (
<CardDeck>
{popular.map((post) =>
<SongCard
key={post.etag}
Title={post.snippet.title}
VideoId={post.id.videoId}
Image={post.snippet.thumbnails.high.url}
ChannelTitle={post.snippet.channelTitle} />
</div>)
}
</CardDeck>
)
}
export default Popular
And
import React from 'react'
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle
} from 'reactstrap';
function SongCard({ Title, VideoId, Image, ChannelTitle }) {
return (
<Card>
<CardImg top src={Image} alt="image" />
<CardBody>
<CardTitle>{Title}</CardTitle>
<CardSubtitle>{ChannelTitle}</CardSubtitle>
<CardText></CardText>
</CardBody>
</Card>
)
}
export default SongCard
I am setting up two different nav bars, one for mobile and one for desktop version, i currently have the desktop version decently done and working on the mobile version, but when i put both components in a single app.js the mobile navbar.js is reaching out and grabbing properties from my nav < ul < li etc. from the desktop navbar. Is there a way to only include the files that are imported into the js files. In my desktop navbar i have my desktop navbar scss and in my mobile navbar i have my mobile navbar.scss. Here is my app.js setup.
import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import 'util/util.js'
import HomePageBody from '../components/homepage/HomePageBody.jsx'
import Footer from '../components/footer/Footer.jsx'
import Menubar from "../components/menubar/MenuBar";
import SideBar from '../components/sidebar/SideBar'
class HomePage extends Component {
componentDidMount() {
window.scrollTo(0, 0);
}
render() {
return (
<React.Fragment>
<div style={{height: '100%'}}>
<Menubar />
<SideBar />
<HomePageBody />
<Footer />
</div>
</React.Fragment>
)
}
}
export default HomePage
I have my "App-component" and a "B-component" that gets rendered inside my app component. Each has its own style.
But when it gets compiled, my ComponentB.css is put before my app.css, making the ComponentB styles being overwritten by my app styles.
Why is this happening??
APP
import React, { Component } from 'react';
import ComponentB from './components/ComponentB';
import './styles/app.css';
class App extends Component {
render() {
return (
<div className="App">
<ComponentB />
</div>
);
}
}
export default App;
COMPONENT B
import React, { Component } from 'react';
import './styles/ComponentB.css';
class ComponentB extends Component {
render() {
return (
<div>
<h1>Hello from ComponentB</h1>
</div>
);
}
}
export default ComponentB;
The way you do it results in a styles conflicts(one style overwriting another style), because after React compiles your code you are still using the same selectors for the same classes.
If you want to use different css files for different components while using the same class names, you should use CSS modules.
This will make your CSS class names scoped locally by default.