score:1
Accepted answer
i think this should work:
{
person &&
person.map((data, index) => (
<div
classname={`${
(index > 1 && (index % 8 == 1 || index % 8 == 0))
? "correct"
: ""
}`}
>
<div>{data.name}</div>
</div>
));
}
or to make this look a bit pretty! just make a function to check this condition for you!
const iscorrectcondition = i => (i > 1 && (i % 8 == 1 || i % 8 == 0));
{
person &&
person.map((data, index) => (
<div
classname={`${
iscorrectcondition(index)
? "correct"
: ""
}`}
>
<div>{data.name}</div>
</div>
));
}
Source: stackoverflow.com
Related Query
- Check if Logged in - React Router App ES6
- Check every property with condition using every es6 for object
- Adding a space after every 4 numbers in an input field in react
- Webpack - React ES6 transpile every template (src to dist)
- Check Every 8 Numbers in ES6/React
- What's the difference between "super()" and "super(props)" in React when using es6 classes?
- When to use ES6 class based React components vs. functional ES6 React components?
- Update React component every second
- How to import and export components using React + ES6 + webpack?
- React passing parameter via onclick event using ES6 syntax
- Best way to polyfill ES6 features in React app that uses create-react-app
- Can you use es6 import alias syntax for React Components?
- Is there a way to check if the react component is unmounted?
- React.js ES6 avoid binding 'this' to every method
- React - check if element is visible in DOM
- Clearing state es6 React
- Polling API every x seconds with react
- React - defaultProps vs ES6 default params when destructuring (performances issues)
- Check if variable is React node or array
- Jest react testing: Check state after delay
- React statics with ES6 classes
- Call a static function into the class React ES6
- Check history previous location before goBack() react router v4
- React constructor ES6 vs ES7
- React testing library - check the existence of empty div
- How do I store JWT and send them with every request using react
- How to namespace es6 classes (for React components)
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- Check if an array is empty in React Native
- How to check how many React children have a certain prop?
More Query from same tag
- Reactjs - am I obligated to pass my nested components in a div box to trigger a function?
- check if element has scroll or not - reactjs
- React: Set the state of a parent based on child's state?
- How to fetch API at component level and prerender it in nextjs?
- How do I configure webpack to run bootstrap and sass?
- React-Router-Dom <Link> not render page
- Throws cannot use 'in' operator to search for 'validateStatus' error
- Amplitude with React and Typescript
- MSAL Configuration for Microsoft Graph
- Styled Components & React: Click event
- ReactJs How to link a page to open with a certain condition?
- Change component state on button click
- How to call setState in Apollo Query Render Props?
- How to source data from multiple directories(file-system) in gatsby using graphQL
- How to pass a handler to onClick with Typescript and material UI
- React.js run useEffect before useState set default values
- JavaScript how to attach result to api with array
- Assigning the state of a component to variables in React.js
- Reset antd table row selections when click on the header checkbox
- Tailwind Carousel
- React native styling. width: percentage - number
- Fetching single item vs fetching multiple items with Redux
- React showing two component at a single time
- Using React states with delay
- Pass index as state to component using React
- avoid opening new window when downloading s3 object
- Remove an event listener from a draggable component
- Switch animation in Expansion panel not working
- How can I make a element disappear by className in React.JS?
- runSequence is not working with gulp?