CODEWITHSUNDEEP
javascriptreactjs
Zarko
Zarko

Reputation: 30

How to provide parameters to children functions in react?

I am trying to set up the ripple effect with react using the react-water-wave package. https://github.com/xxhomey19/react-water-wave

I am able to call child methods with no parameters and it works fine. But when I call with arguments to the parameterised drop method, nothing happens.

import React, { Component } from "react";
import Background from "../img/home.jpg";
import WaterEffect from "react-water-wave";


class HomeComp extends Component {

  render() {
    return (
      <WaterEffect
        style={{
          width: "100%",
          height: "100vh",
          backgroundSize: "cover",
          background: `url(${Background}) no-repeat center center fixed`
        }}
        dropRadius={20}
        perturbance={0.01}
        interactive={true}
      >
        {({ drop }) => <button onClick={drop(50, 50, 20, 0.05} />}
      </WaterEffect>
    );
  }
}

export default HomeComp;

I need to make the ripples at certain points on the canvas. Please help me out.

Upvotes: 0

Views: 84

Answers (2)

Aron
Aron

Reputation: 9248

You can just pass parameters as props and then make your handler a lambda, e.g.

function Example({ a, b, c }) {
  return <ChildComp handler={() => func(a, b, c)} />;
}

Upvotes: 0

larz
larz

Reputation: 5766

When you pass a function as a prop, you don't want it to get called when you pass it, you want it to get called when it gets clicked/hovered/whatever. So instead of using

{({ drop }) => <button onClick={drop(50, 50, 20, 0.05} />}

which calls it right away, try

{({ drop }) => <button onClick={() => drop(50, 50, 20, 0.05)} />}

which passes a function that is waiting to get called when your button is clicked.

Upvotes: 4

Related Questions