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.
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!