How to pass a parameter between functions within a child component using Typescript? Variable undefined

Question

I am creating my own check box component using React and Typescript and wondering why my variable is being logged as undefined when passed down as props.

Here is my secenario:

My outer component exists as such:

./App.tsx

function App() {

  const Direction = {
    Up: 'up',
    Dorn: 'down',
    Left: 'left',
    Right: 'right',
  };

  return (
    <div>
      <Checkbox myEnum={Direction.Up} myName={'Option 1'}></Checkbox>
    </div>
  )
}

Here is my Component:

./Checkbox.tsx

interface myProps {
  myEnum: any;
  myName: any;
}


const Checkbox = ({ myEnum, myName }: myProps) => {

  function filterItem({ myEnum }: myProps) {
    console.log(myEnum)
  }

  return (
    <div>
      <div
        className="input-feild-1"
        onClick={() => {
          filterItem(myEnum);
        }}
      ></div>
      <div>{statusName}</div>
    </div>
  );
};

export default Checkbox;

As you can see above I am defining my interface prior to my component declaration and leaving the type specification as any for the time being.

I am then referencing the interface at the point of the function declaration filterItem here:

  function filterItem({ myEnum }: myProps) {
    console.log(myEnum)
  }

when I console.log myEnum from within the filter item function it returns as undefined, if I log the variable outside of the function I see the enum definition as 'up' as it should be.

What is wrong in the way I am passing this prop in Typescript?

score 0 · Answer 1 · answered Oct 30 '22 at 14:46

hi you need to send it as {myEnum} because you send it to function as you destruct it in the function arg you need to send it as an object in the call. because you don't send it as an object this value will always be empty

return (
    <div>
      <div
        className="input-feild-1"
        onClick={() => {
          filterItem({myEnum});
        }}
      ></div>
      <div>{statusName}</div>
    </div>
  );

How to pass a parameter between functions within a child component using Typescript? Variable undefined

1 Answers1