I am new to react-redux. I am trying to do mapping in Redux presentational component. However, I am failing to do so. My code is as following:
const ABC = ({isAOn, isBOn, isCOn, isDOn,onAClick, onBClick, onCClick, onDClick }) => {
const Array = [{click:'onAClick',style:'isAOn',text:'AAAA'},
{click:'onBClick',style:'isBOn',text:'BBBB'},
{click:'onCClick',style:'isCOn',text:'CCCC'},
{click:'onDClick',style:'isDOn',text:'DDDD'}]
return (
<div>
{Array.map((test) =>
<div onClick={() => test.click} className={({test.style})?'DIV-ON':'DIV-OFF'}>{test.text}</div>
)}
</div>
)
}
export default ABC
Note: 1) isAOn, isBOn are boolean, which are used to toggle className of component.
2) I have also tried writing onClick differently. For example, onClick = {test.click} etc.
3) I have run code without mapping, it works fine. However, it is creating very large amount of repetitive coding which I want to reduce using mapping.
4) It will be very helpful, if you provide solution by running above code in fiddle.
You want something like this:
Working example here.