如何在本机反应中仅添加 3 个文本输入

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

Answer 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);
    }
  };