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
Source: stackoverflow.com
Related Query
- React class does not update when state changes
- React leaflet center attribute does not change when the center state changes
- React useState() hook does not update state when child.shouldComponentUpdate() returns false
- React jsx array component does not re-render when state changes
- Reach child does not update when state changes
- React does not re-render when state changes
- React does not re-render component when the state changes
- react child props does not update when sending updated parent state
- React does not render children when the parent state changes
- Does React batch state update functions when using hooks?
- React does not refresh after an update on the state (an array of objects)
- onMouseDown event in react does not trigger state changes but onClick does
- React js changing state does not update component
- React useEffect hook does not fire when prop dependency changes
- Style does not update when state is updated
- AgGridReact - Grid does not update when isRowSelectable changes
- React hooks - setState does not update state properties
- React Hooks State update one step behind. For this reason my changes are not working correctly
- When does state update in React
- JavaScript filter does not update the React local state
- ReactJS - SetState does not update the state when the state variable is a number
- reducer does not update state in react redux
- React Router does not update component if url parameter changes
- Why does state not update correctly when calling setState() multiple times
- Why React component get re-rendered only once when state does not change?
- React Component not updated when state changes
- PrevState does not update state value immediately in React JS
- React Context Does Not Propagate Changes to Other Consumers After Successful Provider Update
- React Hooks: updating state using useState does not update the state immediately
- My state changes, but does not add class when useEffect, when I scroll
More Query from same tag
- React Material UI condition statement within style property of button
- componentDidMount not changing state for array variable but it works if changed to int instead of array
- Why is my delete function resulting in an undefined value error?
- Create react projects through custom CLI
- React/Leaflet-side-by-side Error: Map container is already initialized. #35
- React - Can't change DOM's Style with JavaScript
- Socket.IO emits multiple times in a room (Using with React.js)
- Update state on scroll react hook
- How to set global style for a react-select.js
- How to get the webshim polyfill library working in React?
- Service Worker (Workbox) isn't delegating routes to our SPA on reload
- Bootstrap 4.0.0-beta.3 modal can't visible when using with fade in React JS
- React Native Router Flux
- react insert data with input
- Adding CopyPlugin to next.config.js
- React.js unreachable sub-components
- Redux dispatches the content of index.html
- Timeouts in Reactjs?
- How do programmatically slide (using transitions) to another route after n seconds in React?
- typescript react setState with user input
- React Hooks: init local state after data is fetched
- My link to manifest.json in index.html works when I run react script 'yarn start', but not when I run 'python3 manage.py runserver'
- How can I upload Storage images from Firebase database onto my menu page?
- Page reloads after getting a Firebase storage link
- Magic Link Authentication in react SPA
- How to define a private property when implementing an interface in Typescript?
- React - Simplifying the code inside the return
- Footer overlapping content when trying to make it stay at the bottom of the page
- How to send next.js client side data to the express server?
- react-router-dom match object isExact false