How to add only 3 Text inputs in react native

Question

I have to add 3 text input but when i press the "add more skills" button it added more than 3 text inputs I just want inputs to be no more than three

here is my code for input handler

const [inputs, setInputs] = useState([{ key: '', value: '' }]);

    const addHandler = () => {
        const addinputs = [...inputs];
        addinputs.push({ key: '', value: '' });
        setInputs(addinputs);
        if ( addinputs == '3') {
            showError("Can't add more than 3")
         }
        
    }
    const deleteHandler = (key) => {
        const _inputs = inputs.filter((input, index) => index != key);
        setInputs(_inputs);
    }
    const inputHandler = (text, key) => {
        const _inputs = [...inputs];
        _inputs[key].value = text;
        _inputs[key].key = key;
        setInputs(_inputs);
       
    }

here is the code of return for styling

 <View>

                                <View >
                                    {/* <ScrollView > */}
                                    {inputs.map((input, key) => (
                                        <View >
                                            <TextInput
                                                style={GlobalSS.textInput}
                                                outlineColor='grey'
                                                mode='outlined'
                                                maxLength={15}
                                                activeOutlineColor='black'
                                                placeholder={"Other Skills"}
                                                value={input.value}
                                                onChangeText={(text) => inputHandler(text, key)} />

                                            <TouchableOpacity onPress={() => deleteHandler(key)}>
                                                <Text style={styles.delete}>Delete Skills</Text>
                                            </TouchableOpacity>
                                        </View>
                                    ))}
                                    {/* </ScrollView> */}

                                    <TouchableOpacity
                                        onPress={addHandler}>
                                        <Text style={styles.moreskills}>Add more Skills</Text>
                                    </TouchableOpacity>

                                </View>
                            </View>

for live editing in code you can go to this link https://snack.expo.dev/@muhammadabdullahrishi/add-input

poo · Accepted Answer · 2022-05-31 07:40:45Z

1

Just add a check on addHandler that will not trigger if input list has three elements in it. Update your code as follows:

const addHandler = () => {
    if(inputs.length <3){

    const addinputs = [...inputs];
    addinputs.push({ key: '', value: '' });
    setInputs(addinputs);
    }
  };

answered May 31, 2022 at 7:40

poo

1,2507 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

How to add only 3 Text inputs in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related