CODEWITHSUNDEEP
reactjsreact-native
Myzel394
Myzel394

Reputation: 1317

React Native Pass not custom props to children

I'm new to React Native. At the moment I'm trying to create a component which is similar to the TextInput. I want to be able to pass all props, that TextInput offers. The parent (the custom component) should pass them to the TextInput (in the returned jsx). This works fine with ...props but since I'm using a custom props, it seems to break this method. Here's my code (it is truncated):

function StateTextInput(props){
    const
        [inputValue, setInputValue] = useState(""),
        valueHandler = given => {
            props.valueHandler(given); // That's the custom prop
        };

    return (
        <TextInput
            {...props}
            value={inputValue}
            style={[styles.input, props.style]}
        />
    )
}

export default StateTextInput;

I want to be able to do something like this:

<StateTextInput
    valueHandler={value => {
        return value.toString().replace(/[^a-zA-Z]/g, "");
    }}
/>

<StateTextInput
    valueHandler={value => {
        return value.toString().replace(/[^a-zA-Z]/g, "");
    }}
    placeholder="Test" // Prop from TextInput!
/>

Upvotes: 0

Views: 97

Answers (1)

Chad Robinson
Chad Robinson

Reputation: 4623

If you put a console.log(props.valueHandler) before your custom-component return (...) you should see that it is set properly. Unless you truncated more than you meant to, based on the code above the reason valueHandler is not getting called is because your TextInput doesn't actually have the required onChangeText attribute to call it.

Upvotes: 1

Related Questions