Array of input values - not updating

Question

I am trying to create a list of inputs using .map and storing the value of the individual inputs in an array. I can add the values to the array, but I can't get the value of the inputs to update from the array.

import React, { Component, useCallback, useState } from "react";
import {
    Card,
    Subheading,
    SkeletonBodyText,
    Layout,
    Page,
    Button,
    List,
    Heading,
    TextField
} from "@shopify/polaris";

export default function Index() {
    const [textFieldsList, setTextFieldsList] = useState([null]);

    const addTagCall = (value, index) => {
        let tester = textFieldsList;
        tester[index] = value;
        setTextFieldsList(tester);

        console.log(value + " index:" + index + " array" + textFieldsList);
    };

    return (
        <Page>
            <Heading>Test Page</Heading>

            <Layout>
                <Layout.Section>
                    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => (
                        <TextField
                            label={"Tag" + i}
                            onChange={newValue => addTagCall(newValue, i)}
                            value={textFieldsList[i]}
                        />
                    ))}
                </Layout.Section>
            </Layout>
        </Page>
    );
}

dw_ · Accepted Answer · 2022-01-25 17:46:13Z

1

State should be immutable in react. Immutability in React

One way to update an item in array, is to "create" a new array, and using "map" loop over each of the items, and if the item's index has been found, use the new value instead.

  const [textFieldsList, setTextFieldsList] = useState([null,null,null,null,null,null,null,null,null,null]);

  const addTagCall = (value, index) => {
    setTextFieldsList((prevState) => {
       return prevState.map((prevValue, i) => index === i ? value : prevValue);
    });
    
    console.log(value+" index:"+index+" array"+textFieldsList);
  
  }

Another method, a bit more similiar to yours, using Object.assign:

  const addTagCall = (value, index) => {
    setTextFieldsList((prevState) => {
       return Object.assign([...prevState], {
         [index]: value
       });
    });
    
    console.log(value+" index:"+index+" array"+textFieldsList);
  }

Edit: With Method 1, you need to have all the values initialized.

So instead of:

... {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => ( ...

you should have:

... {textFieldsList.map((value, i) => ( ...

PS: Also indexes start with 0, at the moment your i is actually your value variable starting with number 1, therefore when updating the first item, the 2nd item in the list would actually update.

edited Jan 25, 2022 at 17:46

answered Jan 21, 2022 at 14:21

dw_

1,8471 gold badge11 silver badges16 bronze badges

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

2 Comments

Tiber Over a year ago

Thanks. The first method did not work, the second one did. Thanks again

dw_ Over a year ago

@Tiber , updated my answer

Collectives™ on Stack Overflow

Array of input values - not updating

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