passing props as classNames in next.js - javascript

I am trying to have the header of each of my app's pages change color based on the current page. How I am trying to achieve this:
<Header className="headerBitcoin"></Header>
What I want is the be able to have the header component present on all 4 pages, and then just change the className to another prop to change the background but not anything else.
And the header component itself
import styles from "../../styles/Home.module.css";
export default function Header(props) {
return (
<div >
<div className={props.className}>aaaaa</div>
<div className={styles.row}>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
<div className={styles.tab}>a</div>
</div>{" "}
</div>
);
}
At the moment the styles for the tabs and row are working but the header is not getting its style applied.
I checked the console and found the header is getting the className headerBitcoin passed to it, however the row beneath it has the className of "Home_row__88lPM"
This is my first time working with next.js, and I know I am doing something wrong because this works in React. Any help would be appreciated.

don't do this:
<div className={props.className}>aaaaa</div>
try this instead:
<div className={styles[props.className]}>aaaaa</div>
I think this should works

I assume it's not being applied because you have the headerBitcoin styles defined in your CSS module.
If you want to apply a class that way (className="headerBitcoin"), you need to define the class in your global CSS instead.
If you meant to use the headerBitcoin defined in Home.module.css, then you'll want to change the className to use the scoped styles.
import styles from "../../styles/Home.module.css";
export default function Header(props) {
return (
<div >
<div className={styles[props.className]}>aaaaa</div>
// ...
</div>
);
}

Related

Trying to map out unique react components

I am trying to map out data into a react component, but I only want unique instead of duplicate components to render to the page. I was researching on how to use the filter, Set, and unique methods was having a hard time figuring out how to work a React component into the syntax
so far....
import React, { useContext } from 'react'
import Tag from '../components/Tag'
import feedbackContext from '../utils/FeedbackContext'
const Tags = () =>{
const data = useContext(feedbackContext)
return(
<>
{
data.map((tag,id) =>(
<Tag key ={id} category={tag.category}/>
))
}
</>
)
}
export default Tags
In the code snippet above it renders all tags from the json file which results to duplicates components being rendered. I was looking up the unique, filter and Set methods, but couldn't quite grasp how to use this in the case of rendering unique components. Has Anyone ever done this before?
Update, let me rephrase what I meant from above, it the snippet below, I simply want just one of each category name appearing. It's technically not duplicating:
<div class="filter">
<div class="category_type">enhancement</div>
<div class="category_type">feature</div>
<div class="category_type">feature</div>
<div class="category_type">enhancement</div>
<div class="category_type">feature</div>
<div class="category_type">bug</div>
<div class="category_type">feature</div>
<div class="category_type">feature</div>
<div class="category_type">feature</div>
<div class="category_type">feature</div>
<div class="category_type">bug</div>
<div class="category_type">enhancement</div>
</div>

React.js NavBar: Is it possible to reference a different component's markup? (Trying to create a navbar that references to components in one route)

Basically I'm trying to make a navbar for a personal website application in which the navbar references content (About/Skills, etc.) all on single page (route). When making the navbar, I can easily reference markup with ids/classes BUT I would have to put all the html in one file.
I noticed that if I were to separate each content into its own react file (About.jsx, Skills.jsx, etc.) and import them, there didn't seem to be a way for me to reference the react component's markup.
I also noticed with react router, this wasn't feasible because each component would be on a separate route (which I don't want) rather than on a single route.
This is my current navbar file below; How exactly Can I import and reference the markup of the separate components?
import React from 'react';
import "../Styles/NavBar.scss";
import About from "./About.jsx"; (Not used)
import Skills from "./Skills.jsx"; (Not Used)
import Projects from "./Projects.jsx"; (Not used)
const NavBar = () => (
<div class="MainDivWrapper">
<div class="NavBarDiv">
<h1 class="NavBarH1">NavBar</h1>
<br/>
<nav>
About
Skills
Projects
</nav>
{/* <div id="AboutDiv">
<h1>About Me</h1>
<span>Just some text</span>
</div>
<div id="SkillsDiv">
<h1>Skills</h1>
<span>Just some text</span>
</div>
<div id="ProjectssDiv">
<h1>Projects</h1>
<span>Just some text</span>
</div> */}
</div>
<hr class="HeaderDivider"/>
</div>
)
You reference a JSX import like that:
/* Component have to start with a capital letter. file name can be anything (usually is the same as component) */
import MyComponent from "./MyComponent"
export default function MyApp() {
return (
<div>
/* other html/components here */
<MyComponent /> // selfing close tag
/* or */
<MyComponent> // with `children`
some content
</MyComponent>
</div>
)
}
Here is a codesandbox implementation of your code: https://codesandbox.io/s/stack-reactjs-navbar-is-it-possible-to-reference-a-different-components-markup-64oic?file=/src/App.js

Nuxtjs: How to call component inside another component?

I understand paradigm "Page-component" but what if I have a page that renders component, how do I call another component inside this component? Currently nuxtjs does not allow me do it. I can not stick to standart "page-component" scheme as I am bulding cart which calls cart-items.
Say If a cart component which is called by page looks like this, how would it call cart-item component inside it?
<!---- cart component called from index.vue --->
<template>
<div>
<Cart-item></Cart-item> < ---------- This doesn't work.
</div>
</template>
<script>
export default {
props: ['items']
}
</script>
I managed it the standard way:
<template>
<div>
<CartItem></CartItem>
</div>
</template>
<script>
import CartItem from '../components/Cart-item'
export default {
props: ['items']
}
</script>
Since nuxtjs auto-registers all components wonder if there is more graceful way.
EDIT: as promised, here is an example on how to pass some content to a component from another one thanks to slots. This is totally working in any Nuxt page ofc.
NestedContent.vue
<template>
<div>
<p>Here is the NestedContent component and below is a slot passed to ParentWithSlots' component</p>
<hr />
<parent-with-slots>
<!-- <template #default> // this one can be omit since we do use the default slot here -->
<p>This content is inserted into the component ParentWithSlots</p>
<!-- </template> -->
</parent-with-slots>
</div>
</template>
ParentWithSlots.vue
<template>
<div>
<p>xxxxxxxxxxx ParentWithSlots' content before slot xxxxxxxxxxx</p>
<slot>Default content in case none is provided</slot>
<p>xxxxxxxxxxx ParentWithSlots' content after slot xxxxxxxxxxx</p>
</div>
</template>
Here is how it looks
PS: you may also give a try to layouts, it can be useful for overall positioning of some of your components visually.
If your components are in the components directory, you can set components: true in your nuxt.config.js and have access to it pretty much anywhere without any additional step with the <cart-item></cart-item> syntax.
More details here: https://nuxtjs.org/blog/improve-your-developer-experience-with-nuxt-components/

Styling Data React

I am new to React and having some trouble here- I am trying to use Sass to style a component in React. For some reason it isn't working. I am getting an error that 'styles' is defined but never used I'm not sure why this is happening as my other components are working fine. Probably something to do with the function around the jsx? I am getting an error 'styles' is defined but never used Any help is greatly appreciated!
Covers.js
import React from 'react';
import { videos } from '../../data/videos.json';
import styles from './covers.module.sass';
export const Covers = () => (
<div className="cover-container">
{videos.map((data, key) => {
return (
<Cover
key={key}
cover={data.cover}
title={data.title}
subtitle={data.subtitle}
description={data.description}
/>
);
})}
</div>
);
const Cover = ({title, subtitle, description, cover}) => {
return (
<div>
<img src={cover} className="cover-image" />
<h1 className="cover-title">{title}</h1>
<h2 className="cover-subtitle">{subtitle}</h2>
<p className="cover-description">{description}</p>
</div>
);
};
export default Covers;
covers.module.sass
.cover-container
text-align: center
color: white
.cover-image
width: 200px
height: 200px
object-fit: cover
.cover-title
font-size: 7em
.cover-subtitle
font-size: 4em
.cover-description
font-size: 2em
you are using CSS Modules but not using properly. CSS Modules allows you to scope locally your css, given an unique identifier to the classes for given scope. This avoids name collisions, a problem that can occur given the global scope nature in CSS.
but for that work properly at your file after importing the style as you do:
import styles from './covers.module.sass';
you need to use that styles object imported at your className declaration, rather than passing a string name like you do. Since you are not applying styles anywhere you get this error warning. You should pass to className style with the corresponding desired class.
therefore, the correct way to apply styles would be:
<div>
<img src={cover} className={styles.cover-image} />
<h1 className={styles.cover-title}>{title}</h1>
<h2 className={styles.cover-subtitle}>{subtitle}</h2>
<p className={styles.cover-description}>{description}</p>
</div>
as you do that your error is fixed, your styles work as expected, and at the browser you'll have unique classes generated which ensures that will not face any class name collision.
You can not use className like this <img src={cover} className="cover-image" />
correct would be <img src={cover} className={styles.cover-image} />
or
you can import sass file like this import './covers.module.sass'; and use className like this <img src={cover} className="cover-image" />
ref: https://www.w3schools.com/react/react_sass.asp
just replace the
import styles from './covers.module.sass';
with
import './covers.module.sass';

Conditional Root Tag on Vue Component

My Question
I have a Vue component that renders content like so:
<template>
<div class="item">
<h1>{{ title }}</h1>
<p>{{ contents }}</p>
<!-- Lot's of other stuff... -->
</div>
</template>
<script>
// export default...
</script>
<style lang="scss">
// style...
</style>
Note the contents within the div...
In some circumstances, I need to change <div class="item"> to <a class="item">. With that in mind, is there a way to conditionally change the tag (e.g. a, div) for the root element of a Vue component?
Research
I have searched around online and was able to find something about using the render function like so:
render (createElement) {
return createElement(this.tag, {}, this.$slots.default);
}
The issue I have with the above is that it implies that I need two separate components, for example; Item.vue and ItemTag.vue. Surely there is a way to do this with one component?
I believe you could use is:
<div :is="useA ? 'a' : 'div'">
...
</div>
This isn't quite what the docs suggests it's for but it does seem to have the desired effect.
https://v2.vuejs.org/v2/api/#is
Using a render function instead wouldn't necessarily require you to have two components but it would need you to rewrite your entire template as a render function.

Categories