score:1

Accepted answer
   onClick={props.onOpenModalJoin}

score:1

import React, { useState } from "react";
import "./styles.css";

const ModalJoin = ({ open, close }) => {
  const modal = open ? (
    <div style={{ background: "pink" }}>
      I am ModalJoin
      <button onClick = {close}> Close Me</button>
    </div>
  ) : null;

  return modal;
};

const ExploreProjects = ({ click }) => {
  return (
    <div style={{ background: "orange" }}>
      I am ExploreProjects
      <ProjectCard click={click} />
    </div>
  );
};

const ProjectCard = ({ click }) => {
  return (
    <div style={{ background: "grey" }}>
      I am ProjectCard
      <button onClick={click}>click me to open modal </button>
    </div>
  );
};

const App = () => 
{

  const [modal, setModal] = useState(false)


  return (
    <div className="App" style={{ background: "lightBlue" }}>
      <h1>I am Parent</h1>

      <ExploreProjects click = {() => setModal(true)}/>

      <ModalJoin open={modal} close={() => setModal(false)} />
    </div>
  );
};

export default App;

Related Query

More Query from same tag