Develop Reference

How to create a new element with reactjs? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 months ago.
Improve this question
With reactjs, I want to write the code that shows a preview of the clicked image at the bottom when an image is clicked. How can I write a function for this that will show a preview of the image when it is clicked?
<React.Fragment>
<div className={`step step-3`} ref={divRef}>
<div className="atrium">
<span>Paketler</span>
</div>
<div className="content">
<div
className="moreThenOne"
area="collectionTitle"
onClick={handleClick}
>
<img className="imgg" src={collection1} alt="ss" onClick={handleImageClick} />
<div className='price'>
<span className='subPrice'> GOLD AİLE PAKETİ</span>
<span >1.200 TL</span>
</div>
</div>
<div
className="moreThenOne"
area="collectionTitle"
onClick={handleClick}
>
<img className="imgg" src={collection2} alt="ss" />
<div className='price'>
<span className='subPrice'> GOLD AİLE PAKETİ</span>
<span >1.200 TL</span>
</div>
</div>
<div
className="moreThenOne"
area="collectionTitle"
onClick={handleClick}
>
<img className="imgg" src={collection3} alt="ss" />
<div className='price'>
<span className='subPrice'> GOLD AİLE PAKETİ</span>
<span>1.200 TL</span>
</div>
</div>
<div className='preview-title'>
<h5> PREVİEW</h5>
</div>
</div>
</div>
</React.Fragment>
I have this code. When the imageis clicked, I want to show the preview of the image at the bottom of the div that says "preview-title".

Just with a toggle state and conditionally show and hide the content when the image clicked.
Example
function func() {
const [showPreview, setShowPreview] = useState(false);
const handleClick = () => setShowPreview(prev => !prev)
return (<React.Fragment>
<div className={`step step-3`} ref={divRef}>
<div className="atrium">
<span>Paketler</span>
</div>
<div className="content">
<div
className="moreThenOne"
area="collectionTitle"
onClick={handleClick}
>
<img className="imgg" src={collection1} alt="ss" onClick={handleImageClick} />
<div className='price'>
<span className='subPrice'> GOLD AİLE PAKETİ</span>
<span >1.200 TL</span>
</div>
</div>
<div
className="moreThenOne"
area="collectionTitle"
onClick={handleClick}
>
<img className="imgg" src={collection2} alt="ss" />
<div className='price'>
<span className='subPrice'> GOLD AİLE PAKETİ</span>
<span >1.200 TL</span>
</div>
</div>
<div
className="moreThenOne"
area="collectionTitle"
onClick={handleClick}
>
<img className="imgg" src={collection3} alt="ss" />
<div className='price'>
<span className='subPrice'> GOLD AİLE PAKETİ</span>
<span>1.200 TL</span>
</div>
</div>
{ showPreview && <div className='preview-title'>
<h5> PREVİEW</h5>
</div> }
</div>
</div>
</React.Fragment>
)}

Reactjs: Error: HomePage(...): Nothing was returned from render

I learn REACTJS, and I find one problem, I don't know how I can fix them
Error: HomePage: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Code Component:
import React from "react";
const HomePage = () =>{
<div className="homepage">
<div className="directory-menu">
<div className="menu-item">
<div className="content">
<h1 className="title">HATS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">JACKETS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">SNEAKERS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">WOMENS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">MENS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
</div>
</div>
};
export default HomePage;
Code App:
import React from 'react';
import './App.css';
import HomePage from './homepage.component';
function App() {
return (
<div>
<HomePage/>
</div>
);
}
export default App;

So add return to the home component:)
import React from "react";
const HomePage = () =>{
return (
<div className="homepage">
<div className="directory-menu">
<div className="menu-item">
<div className="content">
<h1 className="title">HATS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">JACKETS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">SNEAKERS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">WOMENS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
<div className="menu-item">
<div className="content">
<h1 className="title">MENS</h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
</div>
</div>
)
};
export default HomePage;

Two tab menus on one page conflicting with eachother

I feel like the solution to this must be obvious but I just cannot figure it out...
I have some very simple vanilla javascript with two tab menus. The issue is that I cannot figure out how to control the two menus independently of each other without creating conflicts. The end goal is to have the two menus initialized and controlled separately from each other.
The codepen is here: https://codepen.io/trevor3999/pen/gOPPoYB
In that codepen, I am selecting elements using shared classes, which clearly is an issue. So I've initialized separates IDs for each tab group, but I just can't figure out how to utilize them...
Any help would be much appreciated – thank you!
HTML
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<h2 class="title is-2 has-text-centered is-rift has-margin-top">Featured <span
class="has-text-primary">Sensors</span>
</h2>
</div>
</div>
<div class="columns">
<div class="column is-offset-1">
<div class="tabs is-medium is-uppercase" id="sensor-tabs">
<ul>
<li class="is-active" data-tab="1">
<a>
<span>EO/IR</span>
</a>
</li>
<li data-tab="2">
<a>
<span>Radar</span>
</a>
</li>
<li data-tab="3">
<a>
<span>Other Sensors</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-10">
<div id="sensor-tab-content" class="tab-content">
<menu class="is-active" data-content="1">
<div class="columns is-multiline">
EO/IR
</div>
</menu>
<menu data-content="2">
<div class="columns is-multiline">
Radar
</div>
</menu>
<menu data-content="3">
<div class="columns is-multiline">
Other
</div>
</menu>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="columns">
<div class="column">
<hr>
</div>
</div>
</div>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<h2 class="title is-2 has-text-centered is-rift has-margin-top">Featured <span
class="has-text-primary">Platforms</span>
</h2>
</div>
</div>
<div class="columns">
<div class="column is-offset-1">
<div class="tabs is-medium is-uppercase" id="platform-tabs">
<ul>
<li class="is-active" data-tab="uas">
<a>
<span>UAS/RPAS</span>
</a>
</li>
<li data-tab="fixed">
<a>
<span>Fixed Wing</span>
</a>
</li>
<li data-tab="rotary">
<a>
<span>Rotary Wing</span>
</a>
</li>
<li data-tab="land">
<a>
<span>Land</span>
</a>
</li>
<li data-tab="naval">
<a>
<span>Naval</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-10">
<div id="platform-tab-content" class="tab-content">
<menu class="is-active" data-content="uas">
<div class="columns is-multiline">
UAS
</div>
</menu>
<menu data-content="fixed">
<div class="columns is-multiline">
Fixed Wing
</div>
</menu>
<menu data-content="rotary">
<div class="columns is-multiline">
Rotary Wing
</div>
</menu>
<menu data-content="land">
<div class="columns is-multiline">
Land
</div>
</menu>
<menu data-content="naval">
<div class="columns is-multiline">
Naval
</div>
</menu>
</div>
</div>
</div>
</div>
</section>
CSS
.tab-content menu {
display: none;
}
.tab-content menu.is-active {
display: block;
}
Javascript
const TABS = [...document.querySelectorAll('.tabs li')];
const CONTENT = [...document.querySelectorAll('.tab-content menu')];
const ACTIVE_CLASS = 'is-active';
function initTabs() {
TABS.forEach((tab) => {
tab.addEventListener('click', (e) => {
let selected = tab.getAttribute('data-tab');
updateActiveTab(tab);
updateActiveContent(selected);
})
})
}
function updateActiveTab(selected) {
TABS.forEach((tab) => {
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
tab.classList.remove(ACTIVE_CLASS);
}
});
selected.classList.add(ACTIVE_CLASS);
}
function updateActiveContent(selected) {
CONTENT.forEach((item) => {
if (item && item.classList.contains(ACTIVE_CLASS)) {
item.classList.remove(ACTIVE_CLASS);
}
let data = item.getAttribute('data-content');
if (data === selected) {
item.classList.add(ACTIVE_CLASS);
}
});
}
initTabs();

Here's a lazy solution with only a few changes:
https://codepen.io/watofundefined/pen/KKVVROW
console.log("I don't know what kind of code snippet to put here to make the validation happy, sorry!")

Slider issue in react js

I am integrating this template by converting its HTML to jsx.
I could not found the issue as there are no errors in the console. I already have a react developer tool in chrome.
Below is the code for slider in react slider component.
import React from 'react';
export default class Slider extends React.Component {
render() {
return (
<section className="section swiper-container swiper-slider swiper-classic bg-gray-2" data-loop="true" data-autoplay="4000" data-simulate-touch="false" data-slide-effect="fade">
<div className="swiper-wrapper">
<div className="swiper-slide" data-slide-bg="~/ClientApp/public/images/slider-1-slide-1-1920x671.jpg">
<div className="container">
<div className="swiper-slide-caption">
<h1 data-caption-animate="fadeInUp" data-caption-delay="100">Safe <br /> Betting</h1>
<h4 data-caption-animate="fadeInUp" data-caption-delay="200">With 100% Risk-Free Guarantee</h4><a className="button button-gray-outline" data-caption-animate="fadeInUp" data-caption-delay="300" href={null}>Get started</a>
</div>
</div>
</div>
<div className="swiper-slide" data-slide-bg="~/ClientApp/public/images/slider-1-slide-2-1920x671.jpg">
<div className="container">
<div className="swiper-slide-caption">
<h1 data-caption-animate="fadeInUp" data-caption-delay="100">Easy Bets</h1>
<h4 data-caption-animate="fadeInUp" data-caption-delay="200">With the lowest commissions</h4><a className="button button-gray-outline" data-caption-animate="fadeInUp" data-caption-delay="300" href={null}>Join Us</a>
</div>
</div>
</div>
</div>
<div className="swiper-button swiper-button-prev"></div>
<div className="swiper-button swiper-button-next"></div>
<div className="swiper-pagination"></div>
</section>
);
};
}
I am stuck here and I cannot debug further.

How can I get a dynamic value of href and id's of the card in React JS

This is my first question in stackoverflow, I am still learning how to code and it might be a newbie question.
But, is it possible to have a dynamic href and id values when I want to map my data with axios to become cards? Because if I run my code, the card that will work (one that can collapse) is just the first one, the others did not work. This is my code (sorry the code isnt the same with the real file in my vscode cos my real file was becoming a chaos.)
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href="#colla">
{item.model} - {item.tahun}
</a>
</div>
<div id="colla" className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>

You can use unique ID for every href using index value in the map and also map the index in accordion div. See the below code for sample
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href={"#colla"+ index}>
{item.model} - {item.tahun}
</a>
</div>
<div id={"colla"+ index} className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>