In React.js, how can I loop through an array of jsx elements and add attributes to them

Question

class TileImages extends React.Component {
    render() {      
        return (
            <div className="layout">
                <img src={airConditioning} key="air conditioning"  alt="air conditioning" />,
                <img src={avacado} key="avacado" alt="avacado" />,
                <img src={airplane} key="airplane" alt="airplane" />,
                <img src={clothes} key="new clothes" alt="new clothes" />
            </div>
        )
    }
}

So if I want to add an "onClick" event listener to each <img> tag, how could I do that? Would I be better off using regular javascript? Also, is it better to create separate React components for each <img> since they each have their own properties and have to behave in accordance with the other images?

I'm relatively new to React and an amateur at web development, so please bear if my code and questions make no sense...

BTW- Here's the entire code file if anyone has any tips

import React from 'react'

//images
import airConditioning from './images/tiles_0.png'
import avacado from './images/tiles_1.png'
import airplane from './images/tiles_2.png'
import clothes from './images/tiles_3.png'

//CSS styling
import './Images.css'


// const imagesArray = [
//     <img src={airConditioning} key="air conditioning"  alt="air conditioning" />,
//     <img src={avacado} key="avacado" alt="avacado" />,
//     <img src={airplane} key="airplane" alt="airplane" />,
//     <img src={clothes} key="new clothes" alt="new clothes" />
// ]


export class HomePage extends React.Component {
  render() {
    return (
        <div>
            <h1>Lifestyle</h1>
            <br />
            <TileImages />
        </div>
    )
  }
}




class TileImages extends React.Component {
    render() {      
        return (
            <div className="layout">
                <img src={airConditioning} key="air conditioning"  alt="air conditioning" />,
                <img src={avacado} key="avacado" alt="avacado" />,
                <img src={airplane} key="airplane" alt="airplane" />,
                <img src={clothes} key="new clothes" alt="new clothes" />
            </div>
        )
    }
}



//add classes to react to onClick the image tiles using "react --patterns--"

You don't need to loop through them, you can add the onclick as a property, onclick={function}. You could also add a single onclick handler to the parent div and check event.currentTarget to get the image clicked on — Andy Ray
– Andy Ray, Commented Aug 3, 2021 at 23:42
it's React, so you at the least mean onClick, but turning those images into a "dictionary" returning an Object.entries().map is going to a lot cleaner, and easier to maintain. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Aug 3, 2021 at 23:47

hspacheco · Accepted Answer · 2021-08-04 00:35:20Z

If your action is the same for all you can do something like this, adding a default function to onClick

const imageProps = [
  { src: airConditioning, key: "air conditioning",  alt: "air conditioning"},
  { src: avacado, key: "avacado", alt: "avacado"},
  { src: airplane, key: "airplane", alt: "airplane"},
  { src: clothes, key: "new clothes", alt: "new clothes"}
]

const onAction = (ev) => {
  // do something 
}

const InteractiveImage = (props) => <img  onClick={onAction} {...props} />

const TileImages = () => 
  <div className="layout">
    {imageProps.map((inputProps) => <InteractiveImage {...inputProps} />)}
  </div>

If you prefer to keep the same writing format you can keep the syntax, but still setting the onclick function as default until one is passed to the component, which will override:

const TileImages = () => 
  <div className="layout">
    <InteractiveImage src={airConditioning} key="air conditioning"  alt="air conditioning" />,
    <InteractiveImage src={avacado} key="avacado" alt="avacado" />,
    <InteractiveImage src={airplane} key="airplane" alt="airplane" />,
    <InteractiveImage src={clothes} key="new clothes" alt="new clothes" />
  </div>

Bz068 · Accepted Answer · 2021-08-03 23:43:45Z

1

Add the images into array, iterate through array and for each item you can return an image with on click function that’s if you want a dynamic solution

If you don’t care just add on click manually to each image

answered Aug 3, 2021 at 23:43

Bz068

112 bronze badges

Collectives™ on Stack Overflow

In React.js, how can I loop through an array of jsx elements and add attributes to them

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related