Pass a default prop inside function component in react js

Question

I created a react component which takes 2 props: func1, func2.

const Component = ({ func1, func2 }) => {
  return (
          <Button
            onClick={() => {
              func1();
              func2();
            }}
            
          >
            Click
          </Button>
  );
};

The above component is reusable. I have a situation where I pass both functions (func1, func2) as props in this component:

<Component func1={functionA} func2={functionC}/>

I also have situations where I don't pass both props:

<Component func1={functionA}/>

In the last case, how to set the func2 as alternative prop?

How about calling funct1 and funct2 on conditional basis? funct1 && funct1() — Muneeb
– Muneeb, Commented Jul 16, 2020 at 12:19
@Apostolos, i mean, when i will use <Component/> like in the last case i don't want to get the error, that i forgot to pass func2. I need to change something in the Component, and to be prepared that both props could be use not as required. — Asking
– Asking, Commented Jul 16, 2020 at 12:21
@AskMen, so I guess Neeko's answer fits your needs. I would make a small change though. instead of null i would say func2 = () => return false — Apostolos
– Apostolos, Commented Jul 16, 2020 at 12:23

Neeko · Accepted Answer · 2020-07-16 12:24:00Z

1

You can simply set a default parameter when you declare your component:

const Component = ({ func1, func2 = null }) => {
  return (
          <Button
            onClick={() => {
              func1();
              if (func2 && typeof func2 === "function") {
                func2();
              }
            }}
            
          >
            Click
          </Button>
  );
};

Your func2 will now be equal to null (or whatever value you want to assign) when no prop is provided.

edited Jul 16, 2020 at 12:24

answered Jul 16, 2020 at 12:18

Neeko

1,1591 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Gainza · Accepted Answer · 2020-07-16 12:28:49Z

0

Here is an example to how to do it:

const ParentFunc2 = () => {
  console.log("ParentFun2");
};

export default function App() {
  return (
    <div className="App">
      <TestComponent func2={ParentFunc2} />
    </div>
  );
}

TestComponent:

import React from "react";

const func1Default = () => {
  console.log("func1");
};

const func2Default = () => {
  console.log("func2");
};

export default function TestComponent({
  func1 = func1Default,
  func2 = func2Default
}) {
  return (
    <button
      onClick={() => {
        func1();
        func2();
      }}
    >
      Click{" "}
    </button>
  );
}

Live example:

https://codesandbox.io/s/falling-rgb-xidfe?file=/src/App.js

answered Jul 16, 2020 at 12:28

Martin Gainza

1,42714 silver badges24 bronze badges

Collectives™ on Stack Overflow

Pass a default prop inside function component in react js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related