How can i control props by the short way?

Question

I want to know how can we make this case to be easily ?

I have a custom Typeahead component, this is will make some action of my custom. So i want to control the props of Typeahead by props of TypeaheadCustom component:

In component i call TypeaheadCustom :

<TypeaheadCustom propsControler />

In TypeaheadCustom component:

function TypeaheadCustom({ propsControler ,children, ...otherProps }, ref) {
    if(propsControler=== true) { //make some propsOfTypeahead}
        return (
            <Fragment>
                <Typeahead ref={ref} {...otherProps} //propsOfTypeahead>
                    {children}
                </Typeahead>
            </Fragment>
        );
    }
}

I want do exactly like this because i want it clean. How can we do that ? Thank you

Answer 1

You can create the object inside the condition, and pass that object as props

function TypeaheadCustom({ propsControler ,children, ...otherProps }, ref) {
    if(propsControler=== true) { 
        const propsOfTypeahead = {prop1: 1, prop2: 2}
        return (
            <Fragment>
                <Typeahead ref={ref} {...otherProps} {...propsOfTypeahead}>
                    {children}
                </Typeahead>
            </Fragment>
        );
    }
}