Theo's Typesafe Cult•2y ago

React: Passing value to prop callback ?

I want to pass a value to my props call back function Example: <input onChange={(e) => console.log(e.target.value) /> The input onChange prop exposes the event to our callback. How do I accomplish this in my own component?

12 Replies

barry•2y ago

just pass it down this is not deep at all

codeforkOP•2y ago

@barry where does the event come from?

barry•2y ago

wdym from onChange

codeforkOP•2y ago

yes

barry•2y ago

yes from onChange somewhere you have a normal jsx component that takes a onChange property

codeforkOP•2y ago

@barry so <input /> has an onChange prop which takes a callback. How does onChange props give our callback the event as an agrument?

barry•2y ago

somewhere it just calls the function and provides the event idk what you mean

Valhalaar•2y ago

Are you asking about how React internally has implemented event handlers? Or how to call a function you got from props with a specific value in general?

codeforkOP•2y ago

I think I got it. I was overthink it 🙂

codeforkOP•2y ago

Trying to create my own drag and drop lib and was trying to figure how to pass the result to a callback in my onDragEnd prop @barry @Valhalaar appreciate the quick responses 🙂

barry•2y ago

yh no problem to be fair i am so confused now and i dont see any correlation between your first question and this code lol oh wait no i get it lol you're passing that onDragEnd to a dnd component right, you can probably just extend the types of that component i was going more in this direction

interface ButtonTypes extends React.ComponentPropsWithoutRef<"button"> {}

function Button(ButtonProps: ButtonTypes): JSX.Element {
    return (
        <button type="button" onClick={ButtonProps.onClick}>
            {ButtonProps.children}
        </button>
    );
}

interface ButtonTypes extends React.ComponentPropsWithoutRef<"button"> {}

function Button(ButtonProps: ButtonTypes): JSX.Element {
    return (
        <button type="button" onClick={ButtonProps.onClick}>
            {ButtonProps.children}
        </button>
    );
}

<Button
  onClick={(event) => {
     console.log(event);
  }}
>
  Hello
</Button>

<Button
  onClick={(event) => {
     console.log(event);
  }}
>
  Hello
</Button>

codeforkOP•2y ago

The onDragEnd is called when a DnD component is dropped. When this component is dropped it will invoke the onDragEnd returning the result in which I can then update the state of my lists.

Gaming

Programming

React: Passing value to prop callback ?