CODEWITHSUNDEEP
javascriptreactjs
claudiopb
claudiopb

Reputation: 1090

React JS - Passing functions for child components

I have an App component and a function 'modalToggled' inside its. I want to pass the function to multiple child components until I get to the last one, the 'interiores' component.

Like this:

<App> -> <Coluna1> -> <MenuPrincipal> -> <Portfolio> -> <PortfolioMenu> -> <interiores>

App Component, the parent of all components:

import React, { Component } from 'react';
import Coluna1 from './Coluna1'    

class App extends Component {
  constructor(props) {
    super(props)       
    this.state = {
      modalOn: false
    }
   this.modalToggled = this.modalToggled.bind(this)
  }      

  modalToggled = (on) => {
    this.setState({modalOn: on});
  }      

  render() {
    return (
      <div>          
          <Coluna1 onModalToggle={this.modalToggled}/>
      </div>
    )
  }
}

export default App;

This is the 'Coluna1' the first child component. I did the same thing in the another ones: 'MenuPrincipal', 'Portfolio', 'PortfolioMenu' 

class Coluna1 extends Component {
  constructor(props){
    super(props)
  }

  render() {
    return (
      <div>
        <Header />
        <MenuPrincipal onModalToggle={this.props.modalToggled} />
      </div>
    )
  }
}

export default Coluna1

Therefore here is the last component interiores, when I click on the button there appears an error message:

TypeError: _this.props.onModalToggle is not a function 

import React, { Component } from 'react'    
import Modal from 'react-responsive-modal';    


class Interiores extends Component {
  constructor(props) {
    super(props)
    this.state = {              
      open: false
    }      
  }

  onOpenModal = () => {
    this.setState({ open: true });
    this.props.onModalToggle(true);
  };

  onCloseModal = () => {
    this.setState({ open: false });
    this.props.onModalToggle(false);
  };   

  render() { 
    const { open } = this.state;   
    return (                  
      <div>
          <button onClick={this.onOpenModal}>Open modal</button>
          <Modal open={open} onClose={this.onCloseModal} center></Modal>                    
     </div>
    )
  }
}

export default Interiores;

Does anybody know how to solve it? Thank you

Upvotes: 0

Views: 2675

Answers (2)

Azamat Zorkanov
Azamat Zorkanov

Reputation: 819

It happens, because in App class you pass prop with name onModalToggle:

<Coluna1 onModalToggle={this.modalToggled}/>

But in Coluna1 you receive this props with wrong name, modalToggled:

<MenuPrincipal onModalToggle={this.props.modalToggled} />

Just make the names of props equal. In Coluna1 and other intermediate components pass and receive this props as onModalToggle:

<MenuPrincipal onModalToggle={this.props.onModalToggle} />

Upvotes: 2

ManavM
ManavM

Reputation: 3098

This is the problem

modalToggled = (on) => {
    this.setState({modalOn: on});
  }

Since this is a class function it needs to be defined like 

modalToggled(on) {
    this.setState({modalOn: on});
}

Upvotes: 0

Related Questions