We Keep Coding

React icons display

My imported React icons on my personal website are not displaying at all. I tried reinstalling React Icons with and without --save. I checked node_modules and package.json. Everything seems to be in order, but it still doesn't work.
Here is my code from HeaderSocials.jsx:
import React from 'react'
import { BsLinkedin } from 'react-icons/bs'
import { BsGithub } from 'react-icons/bs'
const HeaderSocials = () => {
return (
<div className='header__socials'>
<BsLinkedin/>
<BsGithub/>
aa
</div>
)
}
export default HeaderSocials
And Header.jsx:
import React from 'react'
import './header.css'
import CTA from './CTA'
import SKANDER from '../../assets/SKANDER.jpg'
import HeaderSocials from './HeaderSocials'
const Header = () => {
return (
<div>
<header>
<div className="container header__container">
<h5>Hello I'm</h5>
<h1>Skander JEDDA</h1>
<h5 className="text-light">Fullstack JS Developer</h5>
<CTA />
<HeaderSocials />
<div className="me">
<img src={SKANDER} alt="me" />
</div>
<a href="#contact" className='scroll__down'>Scroll Down</a>
</div>
</header>
</div>
)
}
export default Header
I tried reinstalling the library and checking Stack Overflow, and I even asked ChatGPT, but still to no avail.

Try removing the className 'header__socials' and then if you want to style your icons here is an example link

render function or template not defined in component: Swiper

I am using swiper in nuxt.js. I tried the example from their documentation, but I get an error:
<template>
<swiper
:slides-per-view="3"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
#swiper="onSwiper"
#slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
...
</swiper>
</template>
<script>
// import Swiper core and required components
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
// Import Swiper styles
export default {
components: {
Swiper,
SwiperSlide,
},
methods: {
onSwiper(swiper) {
console.log(swiper)
},
onSlideChange() {
console.log('slide change')
},
},
};
</script>
error in browser
warnings in console in terminal console
my package.json

The Swiper docs state:
Swiper Vue.js components are compatible only with new Vue.js version 3.
Nuxt 2.x currently uses Vue 2, which causes the error you mentioned. A workaround is to use Swiper's API with HTML, as shown in the component below:
<template>
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</template>
<script>
import Swiper, { Navigation, Pagination } from 'swiper'
import 'swiper/swiper-bundle.css'
Swiper.use([ Navigation, Pagination ])
export default {
mounted() {
new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
})
}
}
</script>
<style scoped>
.swiper-container {
width: 600px;
height: 300px;
}
</style>

wrap the container in <client-only></client-only> if you are using newer version of nuxtjs. Use <no-ssr></no-ssr> for older versions

Vue.js can't divide code into loadable small chunks

My problem:
I can't split vue.js code into chunks, I have tried a lot of examples from tutorials. When I am trying to not load vue component with app and split it, for example, with v-if="show_component", got an error component included, but not used. I don't know how to split code and use components, when they needed. In practice, there are no any working examples.
Example of the problem with vue-js-modal:
Can't divide modals into loadable chunks.
I need to load modals only when they triggered to open. It will shrink first page load size. But this option is impossible. Here is my modals structure:
/src/components/Modals/ExampleModal.vue
<template>
<modal name="examplemodal" class="examplemodal-modal" :adaptive="true" :max-width="450">
<div class="header row">
<h3>Title is here</h3>
<v-icon name="times" />
</div>
<div class="content col">
<p>
<b>Some content</b>
<br /><br />
More text here...
</p>
</div>
</modal>
</template>
<style lang="scss">
.examplemodal-modal {
background: rgba(9, 15, 30, 0.3);
.vm--modal {
// I got here a lot of styles in modals
}
}
</style>
/src/main.js
import Vue from 'vue';
import App from './App';
import Icon from 'vue-awesome/components/Icon';
import VModal from 'vue-js-modal';
Vue.component('v-icon', Icon);
/* Tried to make loadable modals, divided to chunks */
Vue.use(VModal, { dynamic: true, injectModalsContainer: true });
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App),
}).$mount('#app');
/src/App.vue
<template>
<div id="app">
<modals-container />
<button class="btn green" #click="showModal">
Show modal
</button>
</div>
</template>
<script>
import ExampleModal from './components/ExampleModal.vue';
export default {
name: 'App',
methods: {
showModal() { this.$modal.show(ExampleModal ) } // Shows empty modal
}
};
</script>
Modal still don't divided into loadable chunks.
If you got any ideas, please, help me.
Version of vue-js-modal:
^2.0.0-rc.3
I have checked stackoverflow for solutions and 100% sure that this issue is not not related to my code.

Webpack has an optimization
Webpzck optimization
Here is en example:
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
minSize: 10000,
maxSize: 250000,
}
}
}
}
If you have a test folder, you should set
test: /[\\/]node_modules[\\/]/,
or your tests can't bundle and run.

React Component not displaying different text / information despite being given unique objects as passed props

I am currently creating a progressive web app with React, HTML, JS, and CSS for learning purposes and have run into an issue where my ExercisePanel components are displaying the exact same information despite being given 2 different objects to pull information from. The ExercisePanel is a stylized button that displays an image and the name of the exercise, and it accurately updates with the different objects. The problem stems from my custom Modal that I made to display the information, as it always displays the information of the first component listed in the App.js file. I have also cut down on some of the Strings for the sake of readability. The files below are what I believe are causing the problem, however I have been unable to figure out the cause. I apologize if the code is messy, I am a beginner with these tools. (Order is App.js then ExercisePanel.js then Modal.jsx)
// Import React and Component
import React, { Component } from 'react';
// Import CSS from App.css
import './App.css';
import Exercise from './js/classes/Exercise.js';
// Import the Today component to be used below
import ExercisePanel from './Components/ExercisePanel.js'
class App extends Component {
render() {
var test = new Exercise("Curl Ups", "10-30", "30 - 90", "A curl up (or sit up) ...", "Medium", "https://img.icons8.com/ios-glyphs/96/000000/sit-ups.png");
var test2 = new Exercise("TEST2", "ur", "2", "sda", "sad", "");
return (
<div className="">
<div className="topheader">
<header className="container">
<nav className="navbar">
<div className="navbar-brand">
<span className="navbar-item"><font class="topheader">Let's Move!</font></span>
</div>
</nav>
</header>
</div>
<section className="results--section">
<div className="container">
<h1>Let's Move is a Website ...</h1>
</div>
<div className="results--section__inner">
<ExercisePanel exercise={test}/>
<ExercisePanel exercise={test2}/>
</div>
</section>
</div>
);
}
}
export default App;
import React from 'react';
import ExerciseButton from './ExerciseButton';
import Modal from './Modal'
let ExercisePanel = (props) => {
return (
<div>
<ExerciseButton image={props.exercise.image} id={props.exercise.name} onClick={handleClick}>{props.exercise.name}</ExerciseButton>
<Modal desc={props.exercise.desc} clickEvent={handleClick} cal={props.exercise.calories} time={props.exercise.estTime} name={props.exercise.name} diff={props.exercise.difficulty}/>
</div>
);
}
function handleClick() {
document.querySelector('.modal').classList.toggle('modal--hidden');
}
export default ExercisePanel;
import React from 'react';
import "./ModalStyle.css"
var Modal = ({name, desc, cal, time, diff, clickEvent}) => {
return (
<div className="modal modal--hidden">
<div style={{backgroundColor: "#beb", padding: "2rem 4rem", maxWidth: "50%", borderRadius: "10px"}}>
<div className="close-button">
<button style={{border: "none", background: "none", cursor: "pointer"}} onClick={clickEvent}>X</button>
</div>
<div className="modal--header">
<span style={{fontWeight: "bold"}}>{name}</span>
</div>
<p>
{desc}
</p>
<div>
<img style={{verticalAlign: "middle"}} src="https://img.icons8.com/ios-filled/50/000000/fire-element.png" alt="calorieImg"/>
<span style={{fontSize: "1.5rem", verticalAlign: "middle"}}>{"Calories: " + cal}</span>
</div>
<div>
<img style={{verticalAlign: "middle"}} src="https://img.icons8.com/pastel-glyph/50/000000/clock.png" alt="clockImg"/>
<span style={{fontSize: "1.5rem", verticalAlign: "middle"}}>{"Recommended Time: " + time}</span>
</div>
<div>
<img style={{verticalAlign: "middle"}} src="https://img.icons8.com/android/40/000000/flex-biceps.png" alt="difficultyImg"/>
<span style={{fontSize: "1.5rem", verticalAlign: "middle"}}>{"Difficulty: " + diff}</span>
</div>
<div className="modal--infotext">
<span>*Values given by estimated calories were from a moderately intense workout for a healthy individual.</span>
</div>
</div>
</div>
);
}
export default Modal;

I suspect it is because when you click the button it executes document.querySelector('.modal').classList.toggle('modal--hidden'); which toggles the modal--hidden class on all modals, so no matter which button you click both modals are opened and you only see the one that is on top.
You probably want to add an open prop to your Modal component and use that prop to conditionally add the modal--hidden class to the root modal div.

Owl Carousel npm module is not working in reactjs

I am working on a reactjs application and I am using owl carousel npm module to show some data.
I am having a component which only renders owl carousel , for that I installed owl carousel and importing like below
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
and below is the render method
render() {
const options = {
nav: true,
navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
rewind: false,
autoplay: true,
slideBy: 1,
dots: true,
dotsEach: true,
dotData: true
};
if(!this.state.response) return(<div>Loading...</div>);
return (
<div className="container">
<div className="PageHeading">
<div className="row">
<div className="col-md-8 col-sm-8 col-xs-12"><h4>Latest Published</h4></div>
<div className="col-md-4 col-sm-4 col-xs-12 text-right"><Link to="/">View All <i className="arrow_carrot-right"></i></Link></div></div>
</div>
<br />
<OwlCarousel ref="gallery" margin={15} loop autoplay={true} items={6} options={options}>
{
this.state.response.map((obj,key)=>
<div className="" key={key}>
<div className="subcategories_blockCard">
<Link to={'/book/'+obj.book_title.split(' ').join('-')}>
<img src={'http://localhost:3001/'+obj.book_cover} style={{'width':'100%'}} title={obj.book_title}/>
{/* <div className="card-content">{obj.book_title}</div> */}
</Link>
</div>
</div>
)
}
</OwlCarousel>
</div>
)
}
Now, problem is that when the application get started carousel items not visible and when I click any link which contains the root path http://localhost:3000/ (suppose the logo of the application contains href of http://localhost:3000/ and when click on logo which is <img src="logo.png />) then carousel gets appear on the page.
I don't know how to fix it,
Please help me.

I guess your problem is that you are not using setState to change the state.