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

Materialize Css Parallex is not a function

I am trying to use the parallax within a react component. I have gotten this to work in the past. This is a MeteorJs project as well
I get a console error:
$(...).parallax is not a function
My component:
import React from 'react';
import $ from 'jquery';
export default class Index extends React.Component{
render(){
$(document).ready(function(){
$('.parallax').parallax();
});
return(
<div className="container">
<div className="parallax-container">
<div className="parallax"><img src="images/parallax1.jpg"/></div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background
content or image in this case, is moved at a different speed than the foreground content while
scrolling.</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src="images/parallax2.jpg"/></div>
</div>
</div>
)
}
}
My client main.js file:
import '../imports/startup/client/routes';
import '../node_modules/materialize-css/dist/js/materialize.min';
import '../node_modules/materialize-css/js/parallax';

The error message is telling you that .parallax() isn't a function in this line of code:
``
$('.parallax').parallax();
```
Which means that $('.parallax') is returning an object (usually a html element). It is not surprising that .parallax() is not a function, because it's just a html element.
Looking at the documentation, I think you are missing this initialisation code:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.parallax');
var instances = M.Parallax.init(elems, options); });

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

Meteor/React: How to integrate react component in main template

This is how my search page looks like in my meteor application:
/client/main.html
<head>
<title>Search</title>
</head>
<body>
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="circular search link icon"></i>
</div>
</body>
I'm completely new to react and I would like to use react for this simple search.
/imports/ui/search.jsx
import React, { Component } from 'react';
export default class Search extends Component {
render() {
return (
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="circular search link icon"></i>
</div>
);
}
}
But how do I have to use it for react properly? How do I use that component in the main template? And how can I set this input field centered on the screen?

You'd better check the document and example first.
Here is an example to answer your question.
Html just contains the empty container element.
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
The App component is the main component. You could use something like Router.
class App extends React.Component {
render() {
return (
<div>
<Search />
</div>
);
}
}
Search component as you made. In above, you could see Search component is used such that way in React.
About style, you can pass style object to component directly or make a css file.
class Search extends React.Component {
render() {
return (
<div class="ui icon input" style={searchContainerStyle}>
<input type="text" style={searchInputStyle} placeholder="Search..." />
<i class="circular search link icon"></i>
</div>
);
}
}
const searchContainerStyle = {
width: '50%',
margin: '0 auto'
}
const searchInputStyle = {
width: '100%'
}
Finally, render App under container element.
React.render(<App />, document.getElementById('container'));

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.