React functional component with mapped Child functional component with onClick function

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;

JavaScript
​x
 
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

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

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)}}
  />
));

JavaScript
 
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>

JavaScript
 
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>

JavaScript
 
const { onClick, project } = props;
​
...
​
<div
  className={`lineDiv gridItem y${project.start}-${project.end} ${project.kind}`}
  style={{positon: "absolute"}}
  onClick={onClick}
>
  ...
</div>
​

Advertisement

Answer