We Keep Coding

localhost server not displaying image (React)

I am learning react and following a series of challenges to do so. One such challenge has me create a React component that takes in properties. One of these properties is the name of a png file. I was not able to do this correctly but the correct line does not seem to be working.
This is an Ubuntu distro on WSL on a windows laptop.
I have done research on the topic the last few days and most response say to turn off adblocker (did not fix it), change file permissions (also did not work), turn off JS and CSS source maps (also did not work).
I noticed that a manually coded url to an image in the same folder was changed to
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgA…Cxd82/eqNyzDUJ0ohc8k/PbelTLtHJFgAAAAASUVORK5CYII=
My component is
import React from "react";
import star from "../images/star.png";
export default function Card(props) {
return (
<div className="card">
<div className="card--image">
<h3 className="card--availability">SOLD OUT</h3>
<img src={`../images/${props.img}`} alt="not working"></img>
</div>
<div className="card--rating">
<img src={star}></img>
<p className="card--dark-text">{props.rating}</p>
<p className="card--light-text">
({props.reviewCount}) · {props.country}
</p>
</div>
<p className="card--desc">{props.title}</p>
<div className="card--price">
<h5>From ${props.price}</h5>
</div>
</div>
);
}
Which is used in
import React from "react";
import Navbar from "./components/navbar";
import Hero from "./components/hero";
import Card from "./components/card";
export default function App() {
return (
//<Hero />
<div>
<Navbar />
<Card
img="zeferes.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Playing on the beach with me."
price={136}
/>
</div>
);
}
My file directory looks like
And every other property works.
The displayed screen right now is:
What is going wrong?
Thank you for any help.

import for the image file(zeferes.png) is missing in Card component.
importing image file in Card component should fix the issue.

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

implementing page javascript in next/react component

I am trying to implement a project like:
https://codepen.io/andytran/pen/GpyKLM
As you can see there is javascript that is needed for the page to function. I am trying to build a Next/React component that implements this code:
import React, { Component } from 'react';
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
class Auth extends Component {
render() {
return (
<div className="App">
<Header></Header>
<div className="container mrgnbtm">
<div className="row">
<div>
hello
</div>
</div>
</div>
</div>
);
}
}
export default Auth;
Where would I put the javascript in the above example? Also, how would I call code from a scss file?

What you do is anti-pattern, instead of importing bootstrap from a CDN you can use reactstrap package.
for element listeners, must pass those to each element that you want, like onClick:
<div id="button" onClick={() => alert("button clicked!")} ....
and for using SCSS in your next app, first you have to install the sass package:
npm install sass --save
then reload the dev server and import SCSS file in component, e.g:
import styles from '../../styles/Home.module.scss'

What's the appropriate way to replace my wrong design?

I have a question about nuxt.js project,
as we know the nuxt.js generate the routes automatically.
I have a page structure like this:
In the header there is navigator in it, I want use it to switch pages(switch the main body's content).
but the nuxt.js do not like vue-router have <router-view/>
<route-link></route-link>
<router-view/>
it only has
<nuxt-link></nuxt-link>
So I write code structure like this:
<template>
<div >
<Header></Header> <!-- the main body written in the Header -->
<Footer></Footer>
</div>
</template>
the Header component:
<navigator-component></navigator-component>
<div>
<Home v-show="$store.state.page_name == 'home' "></Home>
<Search v-show="$store.state.page_name == 'search' "></Search>
<Aboutus v-show="$store.state.page_name == 'about_us' "></Aboutus>
<Contactus v-show="$store.state.page_name == 'contact_us' ">
</Contactus>
</div>
but there is a problem, the URL will not switch, it will stay in the root URL.
So, what's the appropriate way to solve my problem? how to design the
code structure?

Nuxt has a "router-view". It is just: <nuxt />.
The way to go here, is to use layouts.
There is a default file in the layouts directory. Every page has this layout by default.
You can simply write in this default layout file your page structure.
For example:
<template>
<Header />
<nuxt />
<Footer />
</template>
<script lang="ts">
import Vue from 'vue';
import Header from '..';
import Footer from '..';
export default {
components: {
Header,
Footer,
},
};
</script>