Passing onClick from child to parent

Question

I have component foo.js with the stack of cards with the 2 button (open and close modal) but in the same time i want to pass the event to the parent bar.js.

My motivation is to change the parent class when the event occured, in this case i want the outer wrapper to be overflow hidden when the open button get clicked and get back to normal for the close button.


// foo.js

import React from 'react'

class GridWithModal extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
            lecturerList: this.props.lecturers,
            lectorIndex: null,
            isModalOpen: false
        };
        this.showModal = this.showModal.bind(this);
    }

    showModal(id) {
        this.setState({
            lectorIndex: id,
            isModalOpen: true
        });
    }
   
   render() {
     const { lecturerList, lectorIndex, Content } = this.state;
     
     return (
        <>
          {lecturerList.map((lector, index) => {
              return (
                 // my card stuff here...
                 <button
                     onClick={e => {
                          this.showModal(index); // this open the modal 
                     }}>
                      Open The Modal
                 </button>
              )
          })}

           
          <div className="modal">
             // modal stuff here
             <button
             onClick={e => this.setState({ dosenIndex: null })}> // this close the modal
             Close Modal
             </button>
          </div>
          
        </>
     )
   }

}

export default GridWithModal

// bar.js
import React from 'react'

const Layout = ({children}) => {
  
  return (
      <div className="bar"> // this is the element that i want to pass the event to add and remove class when the event occured
         <main> 
             {children} // foo.js somewhere inside this chilldren
        </main>
      </div>
  )

}

export default Layout

Does this answer your question? [Pass props to parent component in React.js](https://stackoverflow.com/questions/22639534/pass-props-to-parent-component-in-react-js) — Ferran Buireu, Jun 30 '20 at 19:09
it should. basically, you have to declare the hook in the parent, and then pass it down to the child to call it. if that doesn't suit your liking, you can use useReducer and useContext hooks — tachko, Jun 30 '20 at 19:10
@FerranBuireu thanks for the refference, i read it but i'm still lost on how to put the `{props.handleThisClick}` in my both button cause they already have function in it — Yudy Ananda, Jun 30 '20 at 19:29

score 1 · Answer 1 · answered Jun 30 '20 at 20:03

1

Create the show/hide methods in parent component bar.js and pass these methods to child component.

Upon click action, just call these methods from child component & it should do the trick.

answered Jun 30 '20 at 20:03

Abhishek Singh

141
5

Ferran Buireu · Answer 2 · 2020-06-30T20:09:18.597

0

Your bar.js should pass a prop to foo.js and then, in your onClick you should call the prop function passed back to bar.js.

Answering this:

@FerranBuireu thanks for the reference, I read it but I'm still lost on how to put the {props.handleThisClick} in my both button cause they already have a function in it

In that case, in foo.js you should use a function that manages both functions. Changing this:

 <button onClick={e => this.showModal(index)}>

To this:

<button onClick={e => this.handleStuff(index)}>

Then, your handleStuff function should be:

handleStuff(id){
  showModal(id)

  props.handleModal(modalState) // change modalState for your value or state
}

showModal(id) {
    this.setState({
        lectorIndex: id,
        isModalOpen: true
    });
}

In bar.js, your function handleModal will be triggered when handleStuff is being executed inside the child component.

edited Jun 30 '20 at 20:09

answered Jun 30 '20 at 20:01

Ferran Buireu

28,630
6
39
67

that is the problem that i tired to solve, how can i pass the prop because the bar.js is deep nested under `{children}`, By the way what exactly `props.handleModal(modalState)` where and how i should define it in this foo.js? by now it throws me an error because it's not define – Yudy Ananda Jul 01 '20 at 11:29
You can still achieve it, the idea still the same. `props.handleModal` is received via `props`, it's defined in `bar.js`, you don't need to define it in the children component. – Ferran Buireu Jul 01 '20 at 11:39

Passing onClick from child to parent

2 Answers2