How To do mapping of click , text and className in Redux's presentational componant

Question

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.

Answer 1

You want something like this:

import React from "react";
import ReactDOM from "react-dom";

const onAClick = () => {
  alert("clicked");
};

const App = ({ isAOn, onAClick }) => {
  const Array = [{ click: onAClick, style: "isAOn", text: "AAAA" }];
  return (
    <div>
      {Array.map(test => (
        <div
          onClick={() => test.click()}
          className={isAOn ? "DIV-ON" : "DIV-OFF"}
        >
          {test.text}
        </div>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App onAClick={onAClick} />, rootElement);

Working example here.

Answer 2

A couple issues,

• test.click is not a function. It is actually just a string.
• Even if it was, you are not invoking the function. To do that you need to have () at the end of the call.
• you have type.isAOn and according to what you posted type isnt defined anywhere

---

Another approach could be as follows.

Instead of deconstructing your props, you should keep it together. This will allow you use the string name in the array to find it within the props object and directly pass it into the onClick prop. This removes the need for placing an anonymous function in to call the function.

const ABC = props => {
    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={props[test.click]} className={({type.isAOn})?'DIV-ON':'DIV-OFF'}>{test.text}</div>
             )}
        </div>          
    )
}
export default ABC

I didnt make any assumptions about the type.isAOn so I left it how it was but you can follow the same pattern that was done for the onClick to gain access to the props you are passing down.