score:0
try this out:
just place the curly brace in the classname prop and pass it a ternay expression to toggle between the two classes you want to based on active state just like that:
const [active, setactive] = usestate(false);
const toggleactive = () => setactive(prevstate => !prevstate);
return (
<div classname="containe">
{movies.map((moviedetails, index) => {
// console.log(index)
return (
<div classname="card">
<div classname="card-body">
<button classname="btn-fermer" onclick={() => removeitem(index)}>
close
</button>
<h6 classname="card-id" key={moviedetails.id + index}>
id:{moviedetails.id}
</h6>
<p classname="card-title">
<strong>{moviedetails.title}</strong>
</p>
<p classname="card-category">catégorie: {moviedetails.category}</p>
<p classname={active ? "card-dislike active":"card-like active"}>
like count :{moviedetails.likes}
</p>
<p classname={active ? "card-like active":"card-dislike active"}>
like count :{moviedetails.dislikes}
</p>
</div>
<button classname="card-button" onclick={toggleactive}>
toggle likes and dislikes
</button>
</div>
);
})}
</div>
);
Source: stackoverflow.com
Related Query
- How To Toggle object in array with React Hooks i want to toggle className ".card like" and "card dislike" with button className"card-button"
- How to push an object into an array with React Hooks
- How do I update states `onChange` in an array of object in React Hooks
- Changing object property in an array with React Hooks does not evoke a re-render
- How to update with React Hooks specific value of an array inside an object?
- React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked
- How to select random object from array with React Hooks?
- How to structure a component using React Hooks with an object that uses the DOM directly? (such as OpenLayers)?)
- How Can I create a Handle an input object with React hooks
- Update all Object Elements of a State Array with React Hooks
- React Hooks Form Handling: Update the state of an object with multiple string items and one array item
- How to push to an object to an array which is a state object, react way with Typescript
- how to change value of object in array using setState with React
- How can I break through React maps to display object that has two values one with an array other with string or number(result)
- How to replace array of one object key with another array of object key in react
- I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even
- How to change an object property in an array state container?? React Hooks useState
- How to push array inside a object with arrays in React js?
- How to destructure an Object from Array with useState in React
- React Hooks useState() with an Array of Object
- how to add object into array with hook state in react js
- how to toggle with react hooks
- How to update an object element in array with specific index, React State
- How to update value of a key in object in an array with the new value in React useState in TypeScript
- REact js noob here, how do you change state object values while looping thru an array with their keys in it
- How to convert a React array to a JSON object with same key and value?
- How to set a JSON object from local.storage using setState with React Hooks
- How do I pull data from object in array as state is being updated in React with hooks?
- React addons update() with $splice - how to insert an object into an array of objects?
- How to fix Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead
More Query from same tag
- How can I prevent my Ionic App from detecting missing peer dependencies in node_modules
- How to comment on .tsx file?
- Does useEffect block rendering the page?
- How can I pan the background image while it's zoomed in?
- React Context: When Are Children Re-Rendered?
- Jest mock callback function from a promise
- Get request axios React js useEffect is not working (Cannot find module './undefined')
- React handleClick button throwing error while using hooks
- Using Reactjs to align and display results based on Contestant ID
- ReactJS - State variables acting strangely
- ReactJS - how can I handle notifications to user based on server response?
- Firebase, Auth0, React. The custom token format is incorrect. Please check the documentation
- Refreshing data fetched with a custom hook after closing a modal
- ReactJS - "Keys" error when adding components in loops
- Dynamically select React component and apply data as props
- React - Passing props to 'ES6 extends' components, and the correct use of 'bind'
- React property is an empty object instead of intended array
- How to get Responsiveness for the mobile approach for the code using media queries
- Azure AD bearer Token in header to authenticate request to web API - Problem with update method
- testing - how to test submit function without hit the api?
- Pass props to the first child using this.props.children
- OnClick event in React not working in child component
- How to set state of parent component from a child component in react?
- How set up a Gatsby Cookie consent banner with gatsby-plugin-gdpr-cookies
- ReactJS Material UI how to prevent Autocomplete to change the value
- React JS Context API: Access Input Value From Another Component
- Getting [object Object] mapping through my array
- TypeError: Cannot read properties of undefined (reading 'reduce')
- Cannot I use functions and call them as mentioned in the code below?
- How to plot whole graph as json data into ploty using react.js?