Wheres my function going inside my map?

help
1

I’m a bit confused. I’m adding a simple alert function to an onClick event through a map inside my component.
But the actual resulting html has no onclick events tied to the list item. This doesn’t seem to be rocket science, what gives here?

import React from 'react';
import CreateHub from '../containers/sidebar_hubs-createhub.js';

const renderIfData = ( hubs ) => {
  if ( hubs && hubs.length > 0 ) {
    return hubs.map( ( hub ) => {
      return <li key={ hub._id } onClick={ ()=>{ alert('KITTENS RULE') }} >{ hub.name }</li>;
    });
  } else {
    return <p>No hubs yet!</p>;
  }
};

const SidebarHubs = ({hubs}) => (

  <div>
      <h1> Hubs </h1>
      <ul> { renderIfData( hubs) } </ul>
      <CreateHub />
  </div>

);
export default SidebarHubs;
2

I just created a quick scaled down repro with your code, and the click events seem to be registered (and working) properly. Must be something else interfering in your code.

3

Thanks for the response. Yeah broke things down to the simplest I could go and finally got the onclicks working. Though when I moved back to the original code it works now. I’ll be honest I’m not sure what was wrong here. The on clicks weren’t working and now they seem to be. No syntax errors, nothing. So weird.

Annoys me, as I wish i could figure out what was going on. Well there could be worse problems :smiley: at least its working!

Again, thanks @hwillson for your response!