score:1
i'm not sure if your current code works as you're expecting it to. here:
classname={
(this.state.selections[lang][cat][sect][letter].correct ? correct : unanswered),
(this.state.selections[lang][cat][sect][letter].incorrect ? incorrect : unanswered)
}
you're invoking the comma operator, which evaluates to only the final expression in the comma-separated list. it's equivalent to:
classname={
(this.state.selections[lang][cat][sect][letter].incorrect ? incorrect : unanswered)
}
to fix it, either use a nested conditional operator, or pass it into a function.
to make your code more concise, instead of iterating over the keys of the object, iterate over the values of the object. you also don't need a fragment <></>
when returning an array.
<div classname="row">
{object.values(this.state.selections).map(selection =>
object.values(selection).map(cat =>
object.values(cat).map(sect =>
object.values(sect).map((letter, index) =>
letter.show &&
<div
classname={
letter.correct
? correct
: letter.incorrect
? incorrect
:
unanswered
}
key={index}
>
</div>
)
)
)
)}
</div>
to avoid the nested conditional, if that's your preference, do something like:
<div
classname={getclass(letter)}
key={index}
></div>
const getclass = (letter) => {
if (letter.correct) return correct;
if (letter.incorrect) return incorrect;
return unanswered;
};
you could also consider changing your model so that the question state (correct/incorrect/unanswered) is a single property, rather than multiple, eg, instead of
"correct": false,
"incorrect": false,
"unanswered": true
have
answerstate: 2
where 2 corresponds to unanswered, 1 corresponds to incorrect, and 0 corresponds to correct - or something like that. then you can use an array to look up the appropriate class name:
classname={classnames[letter.answerstate]}
const classnames = [correct, incorrect, unanswered];
Source: stackoverflow.com
Related Query
- JSX Conditional Rendering for Nested Object Values
- Rendering nested array object values into JSX element
- ES6 Object Destructuring Default Values for Nested Parameters
- Set all values of nested object to false except for one
- React JS: set all values of nested object to false except for one
- If conditional check in react jsx for empty values [es6]
- Nested conditional rendering in jsx React
- How can i update values for all keys in nested object at once in react js?
- How can I access nested arrays in a data object to assign as prop values for a data-grid?
- Will JSX conditional rendering out of an object code split?
- Conditional rendering of a mapped nested object
- React conditional rendering for nested if condition
- how to create React search filter for search multiple object key values
- React + Formik: Use value for nested object
- React JSX conditional wrapper for bootstrap grid
- TypeScript types for heavily nested object
- How to handle window object on nodejs for server-side rendering of reactjs application
- Conditional rendering in react for a multi language app in react
- Can I use multiple booleans for conditional rendering in React?
- What is the most efficient way of rendering a n-level nested object in React JS?
- Conditional Rendering in ReactJs for one part in Html
- Render JSX-element conditionally based on whether source object has deeply nested properties with certain values
- React setState for nested object while preserving class type
- lodash , convert string from svg circle (properties and values separates with space) to object for spread in react component inline
- Possible to mix JSX and regular object for routes in React Router?
- How to inline JSON object as map of attributes and values for component?
- React JS: Rendering object keys and its values
- JSX conditional rendering syntax error
- React JSX conditional rendering of column layout
- onClick inside mapped object JSX for React NextJS not working
More Query from same tag
- How to Link A certain Keyboard Key to a function in React JS
- React.js: Possible to assign useState() outside function component?
- Trigger 2 re-renders on props change
- ReactJS ComponentWillMount() after passing Props
- ReactJs Select add default value
- Tailwind css not work on Vercel after build and deploy it
- VSCode break comma separated values into rows
- How to pass data to Material UI 'Table' component in ReactJS
- How to fix "Type Error" axios in React JS
- Dispatching Redux Actions from Thunks with IIFEs
- Reactjs - create factory, passing props into component
- Making fixed sidebar starts scrolling when it reach to the footer
- Irritating API bug in react, cannot figure it out
- How to properly import SVG.js 3.0.x version into a Typescript Create-React-App project
- react select onChange returning previous value instead of current
- CORS Issue with React app and Laravel API
- clicking first element in loop of react js
- Modifying a Fetch result in api
- How to get Font Awesome Icon in react app for a pseudo element in css
- Is it possible to use React's context without PropTypes?
- Accessing same instance of Javascript class from another file
- Delete long text in TagInput
- Material UI Dialog with checkbox acknowledgement before user can press the yes button to delete record
- Update a react component only on button click with hooks
- How to use async javascript inside react render
- Tabulator does not re-sort data after adding/updating row
- How to find out if element in react have onClick event using dom
- React-intl for non components
- Is it possible to get highlighted html content from user?
- How to render PDF in react?