score:2

import react, { usestate, useeffect } from 'react';

const game = () => {

  //here we are passing our gif data 
  const gifdata = [
    'http://petapixel.com/assets/uploads/2019/06/manipulatedelephant-800x534.jpg',
    'http://petapixel.com/assets/uploads/2019/06/manipulatedelephant-800x534.jpg',
    'http://petapixel.com/assets/uploads/2019/06/manipulatedelephant-800x534.jpg',
    'http://petapixel.com/assets/uploads/2019/06/manipulatedelephant-800x534.jpg',
    'http://petapixel.com/assets/uploads/2019/06/manipulatedelephant-800x534.jpg' 
  ]

  // pressedgifid : for gifid selection
  const [pressedgifid, setgifpressed ] = usestate(0);

  // renderphotocards : this function return all cards 
  // onclick :   setgifpressed to clicked gifid 
  // classname : if our index of perticuler gif match with pressedgifid then we are setting it as selected

  const renderphotocards = () => 
    gifdata.map(( item , index )  => (
      <div key={index}>
        <div
          onclick={() => setgifpressed(index)}
          classname={  pressedgifid === index ? `gif${index} selected` : `gif${index}`  }
        >
          <img src={item} alt="bla" width="300" height="180" />
        </div>
        <br />
      </div>
    )
  )

  return renderphotocards()

}

export default game;

score:2

this is the line where i changed.

classname={pressedgifid === `gif${item[0]}` ? "selected" : ""}

the entire code.

import react, { usestate, useeffect } from "react";
import "./styles.css";
export default function game() {
  const addedtogamegif = [];

  const [pressedgifid, gifpressed] = usestate(null);
  let photocards = [];

  useeffect(() => {
    console.log("->", pressedgifid);
  }, [pressedgifid]);

  if (photocards.length === 0) {
    for (let i = 0; i < 5; i += 1) {
      addedtogamegif.push([
        i,
        "https://petapixel.com/assets/uploads/2019/06/manipulatedelephant-800x534.jpg"
      ]);
    }
  }

  photocards = addedtogamegif.map(item => (
    <div key={item[0]}>
      <div
        onclick={() => gifpressed(`gif${item[0]}`)}
        classname={pressedgifid === `gif${item[0]}` ? "selected" : ""}
      >
        <img src={item[1]} alt="bla" width="300" height="180" />
        {console.log(item)}
      </div>
      <br />
    </div>
  ));

  console.log("-", photocards, addedtogamegif);
  return <div>{photocards}</div>;
}

this is working. i tried, check this js snippet


Related Query

More Query from same tag