We Keep Coding

how to get the clicked element when clicked in ReactJS when using map?

I am mapping 'MemeCard.js' elements inside the 'Home.js' using ReactJs 'map' function.
In Home.js element mapping is done like this
memes = ["url1","url2","url3","url4"];
return (
<div className="container my-3">
<div className="row">
{memes.map((meme, index) => {
return (
<div className="col-xl-4 my-5">
<MemeCard imgurl={meme} index={index} />
</div>
);
})}
</div>
</div>
);
My MemeCard element is
import React from 'react';
import MemeCSS from './MemeCard.module.css';
import whiteHeart from '../images/bordered_heart.png';
import blueHeart from '../images/blue_heart.png';
import Share from '../images/share.png';
export default function MemeCard(props) {
function likeBtnClicked(index){
document.getElementById("heartIMG").setAttribute("src",blueHeart);
console.log(index);
}
return (
<div className={MemeCSS.box}>
<img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" />
<div className={MemeCSS.divbutton}>
<img className={MemeCSS.shareImg} src={Share} alt="share" />
<img
id="heartIMG"
className={MemeCSS.likeImg}
onClick={()=>{likeBtnClicked(props.index);}}
src={whiteHeart}
alt="like"
/>
</div>
</div>
);
}
What I want to do is :
Change the 'likeImage' from 'whiteHeart' image to 'blueHeart' (both of which I have imported), when clicked on the 'whiteHeart' image using the 'onClick'.
But, no matter which 'MemeCard's 'whiteHeart' image I click, the code is changing only the image of the first item to 'blueHeart'. Because it is getting only the "document.getElementById("heartIMG")" of the first item everytime.
But the index is printing the index of the correct item(which is clicked).
Can someone tell me how to solve this problem?

Yous should add a dyanmic function which works for each component indvidually.:
// MemeCard.js
import React from 'react';
import MemeCSS from './MemeCard.module.css';
import whiteHeart from '../images/bordered_heart.png';
import blueHeart from '../images/blue_heart.png';
import Share from '../images/share.png';
export default function MemeCard(props) {
function likeBtnClicked(event){
const element = event.currentTarget;
element.setAttribute("src",blueHeart);
}
return (
<div className={MemeCSS.box}>
<img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" />
<div className={MemeCSS.divbutton}>
<img className={MemeCSS.shareImg} src={Share} alt="share" />
<img
id="heartIMG"
className={MemeCSS.likeImg}
onClick={likeBtnClicked}
src={whiteHeart}
alt="like"
/>
</div>
</div>
);
Now all components has there own function.

This will help you ...
https://upmostly.com/tutorials/react-onclick-event-handling-with-examples
or you can use
React JS onClick event handler

React not Loading Local Images

Recently I've been studying React. I'm facing some issues in my code and don't know the reason.
I'm trying to load a local image in my webpage with the following code:
import React from 'react'
import './style.css'
import Card from '../UI/Card'
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={require('../../blogPostImages/img1.jpg')} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost
However, when I access the webpage there is no image. When I check the elements of the page I find the following code:
Somehow, it looks like the image is not being loaded to the page. I have checked many questions in the forum, but none of them seems to explain this problem.
I also tried to reinstall few modules as webpack and other dependencies, but the problem still persists. The tree of files of my project are as following:
Thank you for the support!

Try importing the image as
import postImage from "../../blogPostImages/img1.jpg";
Modified code
import React from 'react'
import './style.css'
import Card from '../UI/Card'
import postImage from "../../blogPostImages/img1.jpg"
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={postImage} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost

import Img1 from '../../blogPostImages/img1.jpg';
<img src={Img1}/>

Render different html depending on index of object in react

In my meteor project I have a collection called auctions. Using react I wish to render 3 columns of this auctions with unlimited number of rows. To accomplish this I thought it would be possible to send the index of the object but I have no idea how to do this. Another problem is that it shows an error with the html code since I'm not closing the 'div' tag.
This is my App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withTracker } from 'meteor/react-meteor-data';
import { Auctions } from '../api/auctions.js';
import Auction from './Auction.js';
//App component - represents the whole app
class App extends Component {
renderAuctions() {
return this.props.auctions.map((auction, index) => (
<Auction key={auction._id} auction={auction} index={index} />
));
}
render() {
return (
<div className="container section">
<div className="row">
{this.renderAuctions()}
</div>
</div>
);
}
}
export default withTracker(() => {
return {
auctions: Auctions.find({}).fetch(),
};
})(App);
And my Auction.js:
import React, { Component } from 'react';
//Task component - resepresnts a single todo item
export default class Auction extends Component {
render() {
if(index % 3 === 0) {
return (
</div> /* Shows an erros here because of closing tag*/
<div className="row">
<div className="col s4 ">
<div className="card">
<div className="card-image">
<img src="images/logo.png" />
</div>
<div className="card-content">
<span className="card-title">
{this.props.auction.auctionName}
</span>
<p>
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
);
} else {
<div className="col s4">
<h1>Brincoooo</h1>
<div className="card">
<div className="card-image">
<img src="images/logo.png" />
</div>
<div className="card-content">
<span className="card-title">
{this.props.auction.auctionName}
</span>
<p>
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
}
}
}

Any time you return HTML from a render function it needs to be self contained and have balanced tags. That's the way React works, and why it's giving you an error.
Instead of trying to group 3 auctions at a time, you could think of using flexbox instead. With flexbox you simply render all of your auctions, and it looks after the wrapping automatically for you. Users with wider screens will see more than 3 columns, and users on mobile will see probably one when in portrait mode.
If you want to learn about flexbox, there is a cute tutorial here: https://flexboxfroggy.com/ There are plenty of tutorials around if you don't like that one, such as this: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
I'll let you do the work from here

Why React.Component only rendering once even when I have multiple target elements

I'm trying to create a widget with React that would render many times one a page (say a special button widget).
I'm defining my classes in ES6 style like this:
export default class myWidget extends React.Component{
..."constructor and other methods"....
render(){
return <div className="myButtonStyles">Click me</div>;
}
}
My html simply have several identical elements and jQuery selector:
$(document).ready(function(){
$.each($('.myWidget'), function(index, element){
ReactDOM.render(
<App/>,
element
);
})
});
<div>First one <span class="myWidget"/></div>
<div>Second one <span class="myWidget"/></div>
<div>A third <span class="myWidget"/></div>
When running my code, I get the first one rendered only. No Errors!
I experimented with React.createClass instead and seems to be rendering three times.
What am I missing with React? Any help appreciated.

You should change your span tag to <span class="myWidget"></span>
it works , you can check ---> jsbin
variant with $(document).ready ---> jsbin
class Block extends React.Component {
render(){
return (<div>Block</div>);
}
}
$(document).ready(function(){
$.each($('.block'), function(index, element){
ReactDOM.render(
<Block/>,
element
);
})
});
///html
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</body>

React.js: project is not working

I am making a simple React.js project. The project can be found here.
The HTML is as follows:
<header>
<div class="container-center">
<h1 class="text-center">Markdown Previewer</h1>
</div>
</header>
<div class="container-center" id="main-container">
</div>
<footer>
<div class="container-center">
<p class="text-center">Copyright © Sergey Kosterin, 2016. All rights reserved.</p>
</div>
</footer>
The Javascript code is as follows:
var RawTextContainer = React.createClass({
render: function(){
return (
<h1>Raw Text</h1>
);
}
});
var MarkdownContainer = React.createClass({
render: function(){
return (
<h1>Markdown Text</h1>
);
}
});
var MainAppContainer = React.createClass({
render: function(){
return (
<div class="row">
<div class="col-md-6">
<RawTextContainer />
</div>
<div class="col-md-6">
<MarkdownContainer />
</div>
</div>
);
}
});
ReactDOM.render(<MainAppContainer />, document.getElementById('main-container'));
I want the app to show me two columns containing some text. But I don't see anything. What am I doing wrong?

React doesnt use class keyword. Instead of that it should be className. Here is a useful link about class & className keywords.
var MainAppContainer = React.createClass({
render: function(){
return (
<div className="row"> // className instead of class
<div className="col-md-6"> // className instead of class
<RawTextContainer />
</div>
<div className="col-md-6"> // className instead of class
<MarkdownContainer />
</div>
</div>
);
}
});
If it isn't the answer, then you have to provide a bit more information about your problem e.g. stack trace, errors etc. It's quite difficult to guess where is your problem.
Update
Worked example -> Pen Example i don't know why, but Pen doesnt recognise ReactDOM or you didn't include it. You can try to render your component through React.
React.render(<MainAppContainer/>, document...)
Also if you open browser console, you will get more information about some errors, or required statements (in your case jQuery isn't included file).
Thanks.