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

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>
)}

Related

How to complete sidebar menu?

I'm having trouble trying to complete my sidebar menu. Right now the contents are showing directly under the header instead of showing when the menu tab is clicked. Also the close menu button is wrapped in tag but it doesn't seem to do anything right now. I can figure out the transition for the sidebar but my issue is getting the contents to show when the button near the header is clicked. I thought using query selector would automatically make it display a sidebar menu. Please let me know what I'm missing.
App.js:
import fzero from './image/fzero.jpg';
import sonic from './image/sonic.jpg';
import retail from './image/retail.jpg';
import mark from './image/mark.jpg';
import heli from './image/heli.png';
import team from './image/team.png';
import tiger from './image/tiger.png';
import mario from './image/mario.jpg';
import './index.css';
function App() {
const openMenu = () =>{
document.querySelector('.sidebar').classList.add('open')
}
const closeMenu = () =>{
document.querySelector('.sidebar').classList.remove('open')
}
return (
<div className="App">
<body>
<header>
<div className='head1'>
<div className='dropdown'>
<button onClick={openMenu}>☰</button>
</div>
<h1>GameShop</h1>
</div>
</header>
<aside className="sidebar">
<h3>Extras</h3>
<button className="side-close" onClick={closeMenu}>X</button>
<ul>
<li>
Accessories
</li>
<li>
Pre-orders
</li>
</ul>
</aside>
<div className='container'>
<div className='prod'>
<img src={fzero} className="fzero" alt="logo" />
<div className='item'>
<a className="cover" href="">
F-zero
</a>
<div className='system'>
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={sonic} className="sonic" alt="logo" />
<div className='item'>
<a className="cover" href="">
Sonic Earth
</a>
<div className='system'>
<p>Playstation</p>
</div>
<div className='price'>
<p>$49.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={retail} className="retail" alt="logo" />
<div className='item'>
<a className="cover" href="">
Retail Manager 13
</a>
<div className='system'>
<p>PC</p>
</div>
<div className='price'>
<p>$12.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={mark} className="mark" alt="logo" />
<div className='item'>
<a className="cover" href="">
Mark Zuckerberg's Pro Surfer
</a>
<div className='system'>
<p>Xbox</p>
</div>
<div className='price'>
<p>$39.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={mario} className="mario" alt="logo" />
<div className='item'>
<a className="cover" href="">
Super Mario Maker Deluxe
</a>
<div className='system'>
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={heli} className="heli" alt="logo" />
<div className='item'>
<a className="cover" href="">
Planet of the Helicopter in Africa
</a>
<div className='system'>
<p>PC</p>
</div>
<div className="price">
<p>$12.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={team} className="team" alt="logo" />
<div className='item'>
<a className="cover" href="">
Team Fortress 2.5
</a>
<div className='system'>
<p>Xbox</p>
</div>
<div className="price">
<p>$39.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={tiger} className="tiger" alt="logo" />
<div className='item'>
<a className="cover" href="">
Tiger Woods Driving Simulator
</a>
<div className='system'>
<p>Playstation</p>
</div>
<div className="price">
<p>$49.99</p>
</div>
</div>
</div>
</div>
</body>
</div>
);
}
export default App;

It's not clear what your CSS looks like but here is way you can implement what you want.
Note: Assuming you are using React.js
Final Code:
👉 CodeSandbox
index.css
.wrapper {
display: flex;
}
.sidebar {
display: none;
/*👇 Just for styling 👇*/
background-color: #aaaaaa;
padding-right: 80px;
}
.sidebar.open {
display: block;
}
.container {
width: 100%;
/*👇 Just for styling 👇*/
text-align: center;
}
App.js
import fzero from './image/fzero.jpg';
import sonic from './image/sonic.jpg';
import retail from './image/retail.jpg';
import mark from './image/mark.jpg';
import heli from './image/heli.png';
import team from './image/team.png';
import tiger from './image/tiger.png';
import mario from './image/mario.jpg';
import './index.css';
function App() {
const openMenu = () => {
document.querySelector(".sidebar").classList.add("open");
};
const closeMenu = () => {
document.querySelector(".sidebar").classList.remove("open");
};
return (
<div className="App">
<body>
<header>
<div className="head1">
<div className="dropdown">
<button onClick={openMenu}>☰</button>
</div>
<h1>GameShop</h1>
</div>
</header>
<div className="wrapper">
<aside className="sidebar">
<h3>Extras</h3>
<button className="side-close" onClick={closeMenu}>
X
</button>
<ul>
<li>
Accessories
</li>
<li>
Pre-orders
</li>
</ul>
</aside>
<div className="container">
<div className="prod">
<img src={fzero} className="fzero" alt="logo" />
<div className="item">
<a className="cover" href="">
F-zero
</a>
<div className="system">
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={sonic} className="sonic" alt="logo" />
<div className="item">
<a className="cover" href="">
Sonic Earth
</a>
<div className="system">
<p>Playstation</p>
</div>
<div className="price">
<p>$49.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={retail} className="retail" alt="logo" />
<div className="item">
<a className="cover" href="">
Retail Manager 13
</a>
<div className="system">
<p>PC</p>
</div>
<div className="price">
<p>$12.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={mark} className="mark" alt="logo" />
<div className="item">
<a className="cover" href="">
Mark Zuckerberg's Pro Surfer
</a>
<div className="system">
<p>Xbox</p>
</div>
<div className="price">
<p>$39.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={mario} className="mario" alt="logo" />
<div className="item">
<a className="cover" href="">
Super Mario Maker Deluxe
</a>
<div className="system">
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={heli} className="heli" alt="logo" />
<div className="item">
<a className="cover" href="">
Planet of the Helicopter in Africa
</a>
<div className="system">
<p>PC</p>
</div>
<div className="price">
<p>$12.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={team} className="team" alt="logo" />
<div className="item">
<a className="cover" href="">
Team Fortress 2.5
</a>
<div className="system">
<p>Xbox</p>
</div>
<div className="price">
<p>$39.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={tiger} className="tiger" alt="logo" />
<div className="item">
<a className="cover" href="">
Tiger Woods Driving Simulator
</a>
<div className="system">
<p>Playstation</p>
</div>
<div className="price">
<p>$49.99</p>
</div>
</div>
</div>
</div>
</div>
</body>
</div>
);
}
export default App;

Bootstrap 4 collapse not working with map in ReactJS

I am trying to add collapse to a project where it will display all the available content when Read More button (which is working for collapsing button) got clicked. But, it only collapsing for the first item that fetched from the database, and for every other Read More button click it is not working for that particular item rather it keeps opening and closing the first item. Below is my code that I am trying with. I need help with this issue. Thanks very much.
<div>
<div className="container mt-3">
<h1 className="text-justify mb-4">The Blogstar Blog</h1>
<div>
{data && data.length > 0 ? (
data.map((item, index) => {
return (
<div className="card p-3 mt-3" key={index}>
<div className="d-flex">
<div className="text-justify mr-5">
<h3>{item.title}</h3>
</div>
<div className="d-flex ml-auto ">
<p className="mt-2 mr-2">
<img
src="https://img.icons8.com/material-rounded/18/000000/facebook-like.png"
alt="facebook-like-icon"
/>{' '}
{item.upvotes}
</p>
<p className="mt-2 mr-2">
<img
src="https://img.icons8.com/material-rounded/18/000000/thumbs-down.png"
alt="thumbs-down-icon"
/>{' '}
{item.downvotes}
</p>
<p className="mt-2">
<img
src="https://img.icons8.com/ios-filled/18/000000/comments.png"
alt="comments-icon"
/>{' '}
{item.comments}
</p>
</div>
</div>
<div className="d-flex">
<p>
<img
src="https://img.icons8.com/ios-glyphs/18/000000/clock.png"
alt="clock-icon"
/>
{formatDate(item.createdAt)}{' '}
</p>
<p>
<img
className="ml-2"
src="https://img.icons8.com/material-rounded/18/000000/writer-male.png"
alt="author-icon"
/>{' '}
<strong>{item.author.name}</strong>
</p>
</div>
<div className="text-justify">
{ReactHtmlParser(item.content.substring(0, 150))}
<button
class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample">
Read More
</button>
<div class="collapse" id="collapseExample">
{ReactHtmlParser(item.content)}
</div>
</div>
</div>
);
})
) : (
<div>Nothing in database</div>
)}
</div>
</div>
</div>

Change the data-target on your collapse button to this:
data-target={`#collapseExample${index}`}
and your collapse div to this:
<div class="collapse" id={`collapseExample${index}`}>
// ... content
</div>
The problem was that your collapse id and button data-target were static. These values need to be dynamic depending on the data you're mapping through. Otherwise your button will always target the same element. This explains why every button collapses/expands the same div.

react-scroll won't scroll to specific element with explicit id

I have a file called Terms.js that has 2 checkboxes at the end of some scrollable text inside a container. I'm trying to use react-scroll to smooth scroll to one of those checkboxes using this video guide. When I use:
<a className="checkbox-scroll-link" href="#checkbox-scroll-tag">
{termsandconditions.mobileScrollPromptText}
</a>
It will correctly jump to the checkbox. But when I use <Link> like in {/* -------------- Bottom Section -------------- */} of my code below, it doesn't find/scroll to the checkbox.
This is how I'm importing it in Terms.js:
import { Link } from 'react-scroll';
Here is how I'm rendering the component inside Terms.js:
render() {
const bgStyle = {
backgroundImage: `url(${loginCampus})`,
};
const mainContent = (
<div id="terms-page">
<div className="background-container" style={bgStyle}>
<div className="overlay-container">
<div className="terms-container">
{/* -------------- Top Section -------------- */}
<div className="columns top-section-container is-multiline is-mobile">
<div className="column top-left">
<div className="back-container">
<img
src={arrow}
className="back-button"
onClick={this.routeBack}
onKeyDown={this.routeBack}
alt="back"
role="presentation"
/>
<p
className="back-text"
onClick={this.routeBack}
onKeyDown={this.routeBack}
role="presentation"
>
Back
</p>
</div>
</div>
<div className="column is-half header-text-container has-text-centered">
<h1>{termsandconditions.header1}</h1>
<h2>{termsandconditions.header2}</h2>
</div>
<div className="column"></div>
</div>
<div className="yellow-horizontal-line"></div>
<div className="footer-horizontal-line-container">
<div className="grey-horizontal-line"></div>
</div>
{/* -------------- Middle Section -------------- */}
<div className="text-box">
<div className="columns is-multiline is-centered">
<div className="column is-full">
<p>{termsandconditions.termstext}</p>
</div>
<div className="column is-narrow">
<label className="checkbox">
<input type="checkbox" onChange={this.handleTermsCheck} />
<span className="checkbox-text" id="checkbox-scroll-tag">
{termsandconditions.checkbox1}
</span>
</label>
</div>
<div className="column is-narrow"></div>
<div className="column is-narrow">
<label className="checkbox">
<input type="checkbox" onChange={this.handleAgeCheck} />
<span className="checkbox-text">
{termsandconditions.checkbox2}
</span>
</label>
</div>
<div className="column"></div>
</div>
</div>
{/* -------------- Bottom Section -------------- */}
<div className="footer">
<div className="mobile-scroll-prompt">
<Link
className="checkbox-scroll-link"
to="checkbox-scroll-tag"
smooth={true}
duration={1000}
>
{termsandconditions.mobileScrollPromptText}
</Link>
</div>
<div className="footer-horizontal-line-container">
<div className="grey-horizontal-line"></div>
</div>
<button
className="button agree-button"
disabled={!this.state.allTermsAgreed}
onClick={this.goToGameExamplePage}
>
Agree
</button>
</div>
</div>
</div>
</div>
</div>
);
return <section className="section auth">{mainContent}</section>;}}

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>

After duplicating an element the length property is incorrect using jquery

I have an unusual case and can't find a solution for this.
I'm trying to get the length of an column "Kontrolle".
The yellow background is the leader and is always on the first position and is duplicated from an other column.
This is the html code:
<div class="col-xl mr-2 py-0 content-kontrolle">
<div class="header header-kontrolle">
<h1 class="pl-2">Kontrolle</h1>
</div>
<div class="abt-kontrolle">
<div class="mt-2 panel-name panel-kontrolle duplicate" data-name="Name
Name" data-status="leader">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
// and so on....
</div>
</div>
if i check the length of this column i'm getting a wrong length.On the first photo there are 4 elements and i'm getting 3.
this is the jquery snippet:
var $abtLength = $('.abt-kontrolle .panel-name').length;
console.log($abtLength);
the length property is not counting the duplicate element.
if i check the childElementCount i get a correct length:
but when i console.log it i'm getting still wrong length.
var $childDepartmentNodes = $('.abt-kontrolle')[0].childElementCount;
console.log($childDepartmentNodes);
i'm getting also 3.
UPDATE 1
$("div[data-name='"+$name+"']")
.not(".duplicate")
.clone()
.prependTo(".abt-"+ $belongsToDepartment + ":first")
.attr("data-status", "leader")
.removeClass(function(index, element) {
return (element.match (/\bpanel-\S+/g) || []).join(' ');
})
.addClass("panel-name panel-" + $belongsToDepartment + " duplicate");
this is where i clone the leader from a column to another column

maybe your cloning/duplicating is not completely done at the moment when your log happens.
whats the count if you copy this
$('.abt-kontrolle .panel-name').length;
into dev console after everything is done?

Your code works, you can check attached snippet, but we need toi know how you duplicate the div maybe you get the size before duplacting the element
var len = $(".abt-kontrolle>.panel-name").length;
alert(len)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xl mr-2 py-0 content-kontrolle">
<div class="header header-kontrolle">
<h1 class="pl-2">Kontrolle</h1>
</div>
<div class="abt-kontrolle">
<div class="mt-2 panel-name panel-kontrolle duplicate" data-name="Name
Name" data-status="leader">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
</div>

Categories

Resources