CODEWITHSUNDEEP
javascripthtmlreactjsjsxbackend
RA M
RA M

Reputation: 48

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

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--"

Upvotes: 3

Views: 786

Answers (2)

hspacheco
hspacheco

Reputation: 154

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>

Upvotes: 1

Bz068
Bz068

Reputation: 11

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

Upvotes: 1

Related Questions