OnClick event not working in map function react

Question

I am unsure why I cannot use onClick on this within map function???I am getting the data from useSelector in my redux file. Clicking the TestComponent does nothing it seems can't even console log anything. I took out some irrelevant code to see easier. MY actual goa lis to pass the index in the TestComponent to a reducer method. But first I just want to console something at least.

import React from "react";
import CourseListItem from "../components/CourseListItem";
import styles from "./CourseList.module.css";
import { useSelector, useDispatch } from "react-redux";
import { slideActions } from "../store/index";

export default function CourseList() {
  const dispatch = useDispatch();
  const totalSlides = useSelector((state) => state.slide.SlideData.length);
  const currentSlide = useSelector((state) => state.slide.currentSlide);

  const SlideData = useSelector((state) => state.slide.SlideData);
  const list = SlideData.map((item, index) => (
    <CourseListItem key={index} slideNumber={index} title={item.title} onClick={console.log("hello")} />
  ));

  const currentSlideContent = useSelector((state) => {
    //if array item is defined return its title//
    if (state.slide.SlideData[currentSlide]) {
      return state.slide.SlideData[currentSlide].title;
    }
  });

  const nextSlideHandler = () => {
    dispatch(slideActions.goNextSlide());
  };
  const prevSlideHandler = () => {
    dispatch(slideActions.goPrevSlide());
  };
  const goToSlideHandler = (param) => {
    dispatch(slideActions.goToSlide(param));
  };

  return (
    <>
      <div className={styles.container}>
        <div>
          <h2>Total Slides: {totalSlides}</h2>
          <h2>Current Slide: {currentSlide}</h2>
          <button onClick={nextSlideHandler}>Next Slide</button>
          <button onClick={prevSlideHandler}>Prev Slide</button>
        </div>
        <div>
          <h1>List</h1>
          {list}
        </div>
      </div>
    </>
  );
}

I edited this to include all my code from this file. I apologize.

Answer 1

I found why. First I wasnt writing my onClick right, secondly I didnt pass the onClick down to the component via props which was the main thing.

fix one
1) onClick={() => {console.log("hello");}}

fix two in CourseListItem.js
2)
 <div onClick={props.onClick}>
        //stuff
 </div>

I asked this question poorly, an didn't include all my code, lesson learned!

Answer 2

You have not created any class or function-based component. Try to make this function-based component as you are using Hooks and call it. Then it will work. Also, you have not imported TestComponent. Do like this and it will work hopefully:

import React from "react";
import styles from "./CourseList.module.css";
import { useSelector, useDispatch } from "react-redux";
import { slideActions } from "../store/index";
import {TestComponent} from 'TestComponent'; //Import from your project this is hint


export const Tester = () => { // Make it functional like this

//get slide data//
const SlideData = useSelector((state) => state.slide.SlideData);

//map data
const list = SlideData.map((item, index) => (
    <TestComponent key={index} slideNumber={index} title={item.title} onClick={()=>console.log("hello")} />
  ));

//render components
return (
    <>
      <div className={styles.container}
        <div>
          <h1>List</h1>
          {list}
        </div>
      </div>
    </>
  );
  } //Ends here

Now call this Tester Component from your project and check console after onClick.

Answer 3

If you are using reactslick npm and need to pass arguments through function just call like this

data.map(val=>
<div onClick={()=>handleplay(val)} >slide</div>
)

Answer 4

Hooks can only be called inside of the body of a function component

import styles from "./CourseList.module.css";
import { useSelector, useDispatch } from "react-redux";
import { slideActions } from "../store/index";

//map data
const list = SlideData.map((item, index) => (
    <TestComponent key={index} slideNumber={index} title={item.title} onClick={()=>console.log("hello")} />
  ));

const componentName = () => {
//get slide data//
const SlideData = useSelector((state) => state.slide.SlideData);

 return (
    <>
      <div className={styles.container}>
        <div>
          <h1>List</h1>
          {list}
        </div>
      </div>
    </>
  );
}