Handling Onclick Events for Multiple Elements in Javascript

I had a bad habit of implementing things in such a elaborative way. This post will not have complete compilable code as I wanted to keep track of this learning, I created this post. So, please ignore my inefficacy.

class ChocolateFactory extends React.Component  {
 constructor(props) {
    super(props);

    this.state = {
        chocolates: "3-Roses",
        ingredient: "Milk",
    };
  }

 CHOCOLATES = {
   'Lindt-Dark-Chocolate': lindtDarkChocolate,
   'Temptations-Dark-Chocolate': temptationsDarkChocolate,
   'MilkyBar-Milk-Chocolate': milkyBarMilkChocolate,
   'Italiano-Milk-Chocolate': italianoMilkChocolate',
 }
   
  generateChocos = () => {


      /* Number of Steps and Colors will be calculated */
      if (this.state.chocolates === 'Lindt-Dark-Chocolate' ||
          this.state.chocolates === 'Temptations-Dark-Chocolate') {
           let cocoa = this.state.chocoBar;
           this.CHOCOLATES[this.state.chocolates](cocoa);
          } else {
            let milk = this.state.ingredient;
            let normal = this.state.chocoBar;
            this.CHOCOLATES[this.state.chocolates](normal, milk);
          }
  };

 render() {
   return( 
        <div className='Chocolate-Box'>
            <div className='Dark-Chocolate'>
                 <button  id="Lindt" class="chcobtns"
                    onClick={()=>this.chooseChoco('Lindt-Dark-Chocolate')}>
                     Algorithm-A Bubble Sort</button>
                 <button id="temptations" class="chcobtns"
                    onClick={()=>this.chooseChoco('Temptations-Dark-Chocolate')}>
                    Algorithm-A Insertion Sort</button>
             </div>
             <div className='Milk-Chocolate'>
                  <button  id="MilkyBar" class="chcobtns"
                     onClick={()=>this.chooseChoco('MilkyBar-Milk-Chocolate')}>
                     Algorithm-B Bubble Sort</button>
                  <button  id="Italaiano" class="chcobtns"
                     onClick={()=>this.chooseChoco('Italiano-Milk-Chocolate')}>
                     Algorithm-B Insertion Sort</button>
             </div>
           </div> 
          );    
  }

}

I have 4 elements and 4 event Listener to one event handler, and this is obviously more inefficient. I want to simplify this with map.

Get Developer Notes’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

I converted firstly into a map.

class ChocolateFactory extends React.Component  {
 constructor(props) {
    super(props);

    this.state = {
        chocolates: [
          {
            _id: 1, 
            name: 'Lindt Dark-Chocolate',
            funcName: lindtDarkChocolate
          },
          {
            _id: 2, 
            name: 'Temptations Dark-Chocolate',
            funcName: temptationsDarkChocolate
          },
          {
            _id: 3, 
            name: 'MilkyBar Milk-Chocolate',
            funcName: milkyBarMilkChocolate
          },          
          {
            _id: 4, 
            name: 'Italiano Milk-Chocolate'',
            funcName: italianoMilkChocolate
          }
        ],
    };
  }

   
  generateChocos = () => {


      /* Number of Steps and Colors will be calculated */
      if (this.state.chocolates.name === 'Lindt Dark-Chocolate' ||
          this.state.chocolates.name === 'Temptations Dark-Chocolate') {
           let cocoa = this.state.chocoBar;
           this.state.chocolate.funcName(cocoa);
          } else {
            let milk = this.state.ingredient;
            let normal = this.state.chocoBar;
            this.state.chocolate.funcName(normal, milk);
          }
  };

 render() {
   return( 
        <div className='Chocolate-Box'>
            <div className='Dark-Chocolate'>
                 <button  id="Lindt" class="chcobtns"
                    onClick={()=>this.chooseChoco('Lindt-Dark-Chocolate')}>
                     Algorithm-A Bubble Sort</button>
                 <button id="temptations" class="chcobtns"
                    onClick={()=>this.chooseChoco('Temptations-Dark-Chocolate')}>
                    Algorithm-A Insertion Sort</button>
             </div>
             <div className='Milk-Chocolate'>
                  <button  id="MilkyBar" class="chcobtns"
                     onClick={()=>this.chooseChoco('MilkyBar-Milk-Chocolate')}>
                     Algorithm-B Bubble Sort</button>
                  <button  id="Italaiano" class="chcobtns"
                     onClick={()=>this.chooseChoco('Italiano-Milk-Chocolate')}>
                     Algorithm-B Insertion Sort</button>
             </div>
           </div> 
          );    
  }

}

Now, I wanted to refactor the list of buttons into a map.

 const chocoButtons = this.state.chocolates?.map(chocos => 
         <button className='chocoBtns' key={chocos._id} 
                 onClick={this.handleClick(chocos.funcName)} 
                 value={chocos.name}>{chocos.name}</button>
    );

 <div className='Chocolate-Box''>
               {chocoButtons}
            </div> 

Reference:

Create map in this.state

Map of Functions

Refactoring a list of buttons to a map

Utube

Find element in map by its property value