Dynamically render component for each item in array React Native

Question

Beginner question here, not sure exactly what this would be considered, but I'm trying to make a form where a user can add and remove input rows upon pressing a button. What do I need to change to render new components or remove components when the Add or Remove buttons are pressed? Right now, the Add and Remove button change the textInput array appropriately, but components are not actually being added or removed.

Here is my current code:

FormScreen.js

import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { Button, Caption } from 'react-native-paper';
import InputCard from '../components/InputCard';

const FormScreen = props => {
    const textInput = [1,2,3];

    const addTextInput = () => {
        let currArr = textInput;
        let lastNum = currArr[currArr.length -1]
        let nextNum = lastNum + 1
        console.log(currArr, lastNum, nextNum);
        textInput.push(
            nextNum
        );
        
        console.log(textInput);
    };
    
    const removeTextInput = () => {
        textInput.pop();
        console.log(textInput);
    };

    return (
        <ScrollView>
            <View style={styles.col}>
                <View style={styles.row}>
                    <Caption>Favorite colors?</Caption>
                </View>
                <View style={styles.row}>
                    <View>
                    {textInput.map(key => {
                        return (
                            <InputCard key={key}/>
                        );
                    })}
                    </View>
                </View>
                <View>
                    <View style={styles.col}>
                        <Button title='Add' onPress={() => addTextInput()}>Add</Button>
                    </View>
                    <View style={styles.col}>
                        <Button title='Remove' onPress={() => removeTextInput()}>Remove</Button>
                    </View>
                </View>
            </View>
        </ScrollView>
    );
};

export default FormScreen;

InputCard.js

import React, { useState } from "react";
import { View, StyleSheet } from 'react-native';
import { Caption, Card, TextInput } from "react-native-paper";

const InputCard = (props) => {

    const [input, setInput] = useState('');
    
    return (
        <View>
            <Card>
                <Card.Content>
                    <Caption>Item {props.key}</Caption>
                    <View style={styles.row}>
                        <View style={styles.half}>
                            <TextInput
                                label="Input"
                                value={input}
                                onChangeText={input => setInput(input)}
                                mode="outlined"
                                style={styles.textfield}
                            />
                        </View>
                    </View>
                </Card.Content>
            </Card>
        </View>
    );
}

export default InputCard;

Akshay Shenoy · Accepted Answer · 2022-01-13 16:48:49Z

1

Instead of storing it in a array, try to do something like this, using 2 states.

const [totalTextInput, setTotalTextInput] = useState([])//initial state, set it to any data you want.
const [count, setCount] = useState(0);

const addTextInput = () => {
  
      setCount((prevState) => prevState + 1);
      setTotalTextInput((prevState) => {
        const newTextInput = Array.from(prevState);  // CREATING A NEW ARRAY OBJECT
        newTextInput.push(count);
        return newTextInput;  
      });
    };

const removeTextInput = () => {
  setTotalTextInput((prevState) => {
    const newTextInput = Array.from(prevState);  // CREATING A NEW ARRAY OBJECT
    newTextInput.pop();
    return newTextInput;  
  });
};

And in your code:

<View>
      {totalTextInput.map(key => {
           return (
                <InputCard key={key}/>
            );
       })}
</View>

edited Jan 13, 2022 at 16:48

answered Jan 13, 2022 at 16:34

Akshay Shenoy

1,26810 silver badges12 bronze badges

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

2 Comments

patataskr Over a year ago

Thanks for your answer, what is timers.push(count) doing? I get an undefined error when trying your code as is for timers

Akshay Shenoy Over a year ago

Sorry, updated the answer.

Collectives™ on Stack Overflow

Dynamically render component for each item in array React Native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related