Hi I have mapped some json data named “projectsData” and I am trying to “bind” an onClick event with a setState hook. The mapping works except for the “onClick” does not work when clicking the grid item. In my case I want to update filterproject value with the project.id value from that target.
Right now when I click an item it does nothing.
How do I successfully map a function to “onClick” while using functional components?
Below is the parent Component
import React, { useEffect, useState } from "react"; import projectsData from '../data/projectsData'; import Project from './Projects'; const App = (props) => { const [projects] = useState(() => (projectsData.map((project) => <Project id={project.id} project={project} onClick={() => {setFilterProject(project.id)}}/>))); const [filterproject, setFilterProject] = useState(null); return ( <body> <div id='sepLine'> <div id="visHolder"> <div id="visContainer" style={{position: "relative", width: "840px", height: "1823px"}} > {projects} </div> </div> </div> </body> ); } export default App;
And here is the Child Component – “Project”
import React, { useRef } from "react"; const Project = (props) => { const {projectClick, project} = props; return ( <div className={`lineDiv gridItem y${project.start}-${project.end} ${project.kind}`} style={{positon: "absolute"}} onClick={projectClick}> <h5>{project.title}</h5> <br></br> <p className="year"> <span className="yearsstart">{project.start}</span> - <span className="yearsend">{project.end}</span> <br></br> <span className="kind">{project.kind}</span> </p> </div> ) } export default Project
below is a screen grab of Console showing one of the mapped projects and it’s onClick parameters. I can see it but when I click nothing happens. Any help would be great!
Advertisement
Answer
You pass click handler to a prop called onClick
when setting initial state
const [projects] = useState(() => projectsData.map((project) => ( <Project id={project.id} project={project} onClick={() => {setFilterProject(project.id)}} /> ));
but access it as projectClick
in the component
const { projectClick, project } = props; ... <div className={`lineDiv gridItem y${project.start}-${project.end} ${project.kind}`} style={{positon: "absolute"}} onClick={projectClick} > ... </div>
Fix by accessing the correct prop
const { onClick, project } = props; ... <div className={`lineDiv gridItem y${project.start}-${project.end} ${project.kind}`} style={{positon: "absolute"}} onClick={onClick} > ... </div>