Function inside component in reactjs

Question

I have the following snippet of code

return (
   <InputMask
         mask="99:99"
         *some other prop*
   >
    {(inputProps) => (
         <Input
            {...inputProps}
            onSubmit={*Does something*}
          />
   </InputMask>)

this is the return of a custom component, my question is regarding the syntax... how can a function be defined inside a component? Is this function being called whenever this component is rendered? What is passed into this function (in this case, how is InputProps passed in and what does it contain)?

As you can deduce, I am quite new to frontend development and react in general so any guidance or reference to any documentation will be of great help!

Luke Briggs · Accepted Answer · 2020-02-10 21:58:29Z

1

So firstly a quick definition. Here's some JSX where I'm using children:

<MyComponent>
   <b>
       This bold element
   </b>
   And this text are children of MyComponent.
</MyComponent>

Inside MyComponent is a regular render method, except importantly, it also has a props.children that it can do whatever it wants with:

render(){
   return <div className="my-component">{this.props.children}</div>;
}

Importantly, children is just a prop like anything else. It can be anything you'd like it to be, including a function. This can be particularly powerful if a component wants to give some information to its unknown children. A nice example is some sort of iterator:

<Loop over={[1,2,3]}>
   {item => <span>{item}</span>}
</Loop>

Where the Loop component is calling this.children, as it expects it to be a function:

render(){

   // For each item in the 'over' prop, call this.props.children
   return this.props.over.map(this.props.children);

}

Essentially this is what you have - in terms of when that function runs and what the inputProps object is, it's entirely up to that InputMask component, but it almost certainly will be running it when it renders.

edited Feb 10, 2020 at 21:58

answered Feb 10, 2020 at 21:45

Luke Briggs

3,7891 gold badge18 silver badges26 bronze badges

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

1 Comment

Ted Over a year ago

Thank you :) I think I understand it now! Basically, the function inside is the child of the component and inputmask can use this child whether it is a function or another component and inputProps is just an arbitrary variable, how it is used is based purely on how inputmask is implemented.

Collectives™ on Stack Overflow

Function inside component in reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related