Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type

Question

I have a problem that I don't know how to solve.

I'm trying to call an onClick that is inside of a Component. But got this error:

Uncaught Error: Expected onClick listener to be a function, instead got a value of object type.

My code that call the Component:

import React from 'react';
import './Square.css';
import Controller from './controller.js';

class Square extends React.Component {
 render() {
    return (
    <div className="square" onClick={<Controller/>}>
        {this.props.children(<Controller/>)}
      </div>
    )
  }
}

export default Square;

And my componentcalled with function:

import React from 'react';

class Controller extends React.Component {
    changePlayer = () => {
       alert('oi')
    }
    render(){
        return(
            <div>
                {this.props.position}
            </div>
        )
    }

}

export default Controller;

That line, I want to pass o render of the Controller to render..

{this.props.children(<Controller/>)}

But it is giving error. Someone help me, please?.

Answer 1

If you want to call the function of child component from your parent component you need to use ref's in React here is how you do it:

import React from 'react';
import './Square.css';
import Controller from './controller.js';

class Square extends React.Component {
 render() {
    return (
    <div className="square" onClick={this.child.changePlayer();}>
        {this.props.children(<Controller  ref={instance => { this.child = instance; }}/>)}
      </div>
    )
  }
}

export default Square;

Answer 2

You can achieve this by passing down a prop to the child that is toggled on by onMouseDown and off by onMouseUp:

Square.jsx

import React, { Component } from 'react';
import './square.css';
import Controller from './Controller';


class Square extends Component {
  state = { clicked: false };

  toggleClicked = (clicked = false) => {
    this.setState({ clicked });
  }

  render() {
    return (
      <div className="square" onMouseDown={this.toggleClicked.bind(this, true)} onMouseUp={this.toggleClicked}>
        <Controller clicked={this.state.clicked} />
      </div>
    )
  }
}

export default Square;

Controller.jsx

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

class Controller extends Component {
  changePlayer = () => {
    alert('oi')
  }

  componentDidUpdate(prevProps) {
    if (this.props.clicked && !prevProps.clicked) {
      this.changePlayer();
    }
  }

  render() {
    return (
      <div className='controller'>
        {this.props.position}
      </div>
    )
  }
}

export default Controller