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.
Related
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>
)}
i'm trying to map some bootstrap carousel items but I think my issue is with the .active class,
They are mapping one over the other without being able to let me slide them drop the code below, hope someone can help me hehe...
<div id="charactersCards" className="carousel slide border border-warning rounded-lg" data-ride="carousel">
<div className="carousel-inner text-warning">
{!!store.character &&
store.character.results.map((char, i) => (
<div key={i} className="carousel-item text-center active">
<div className="card d-block w-100">
<img src="https://place-hold.it/400x200" className="card-img-top" alt="Image" />
<div className="card-body">
<h5 className="card-title">{char.name}</h5>
<p className="card-text text-white">{bio}</p>
<Link
className="btn text-warning border border-warning"
onClick={() => actions.currentCharId(i + 1)}
to={`/iPeopleCard/${i + 1}`}>
Learn More!
</Link>
<i
className="fas fa-heart mt-3 pt-4 ml-3"
onClick={() => actions.setCharToFav(i)}
style={
actions.characterFindInFav(i) ? { color: "yellow" } : { color: "white" }
}
/>
</div>
</div>
</div>
))}
</div>
You need to set 'active' class conditionally. Because now all of your carousel items have 'active' class. You can do something like this:
// instead of <div key={i} className="carousel-item text-center active">
// write the code below:
<div
key={i}
className={i === 0 ? "carousel-item text-center active" : "carousel-item text-center" }>
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>;}}
I am new to the react js. Here I am using the Modal of reactStrap.
<Modal isOpen={props.isOpen} centered='true'>
<ModalHeader>
Change this Question?
<button type="button" class="close" aria-label="Close" onClick={props.closeModal} ><span aria-hidden="true">×</span></button>
</ModalHeader>
<ModalBody>
<div className="row">
<div className="col-md-12 text-center ">
<Button type="submit" className="btn btn-outline-primary" onClick={props.showChangeQuestionModal} >Change by creating your own Question</Button>
</div>
</div>
<div className="row">
<div className="col-md-12 text-center marginForOrOption">
<span>or</span>
</div>
</div>
<div className="row">
<div className="col-md-12 text-center">
<Button type="submit" color="btn btn-primary">Change and Replace from Question bank</Button>
</div>
</div>
</ModalBody>
<ModalFooter>
</ModalFooter>
</Modal>
</div>
Now Here I have added that button to close modal . But In reactstrap it comes by default.But In my case it is not coming .
Another problem is that,
In the ModalHeader, It comes by default h5 so How can I change that ?
First question: You need to provide toggle method to your ModalHeader component's props if you want reactstrap to show its own close button so your ModalHeader should looks like:
<ModalHeader toggle={this.toggleModalMethod}>
Change this Question?
</ModalHeader>
Second question: You are not gonna do much with h5 inside of modal header but you definitely can change your h5 element style to make it looks how you want it to look:
<ModalHeader>
<span className="customStyleToOverrideDefault">Change this Question?</span>
</ModalHeader>
Please, dont forget to vote up for my answer if it helped you.
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>