How to properly change state value of array of objects?

Question

Imagine this variable:

let myArray = [
        {
            name: "animal",
            value: "",
        },
        {
            name: "fruit",
            value: "",
        },
        (...)
];

myArray is set in stone - it is hard-coded and its length wont change, but it is a lengthy array of 10 elements. A user will only update myArray objects values via html input. Based on above, can myArray be considered as a state in Svelte?
Is below example the correct way of changing myArray state in Svelte?

(...)
myArray.forEach(element => { 
    if (element.name === name) element.value = value;
});

I have a button state that its disabled attribute depends on all elements in myArray having some value. Can I use Sveltes $: btnIsDisabled reactive statements to achieve that and how?

<button type="submit" disabled={btnIsDisabled}>
    Submit me
</button>

Here you go. https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs — Garry, Jun 07 '19 at 16:30
You've tagged both [tag:reactjs] and [tag:svelte] but mentioned only Svelte in the question. Does your question have something to do with React? — Jordan Running, Jun 07 '19 at 18:57

Chris Ngo · Accepted Answer · 2019-06-08T08:40:20.983

I'm assuming you plan on using your array as the component-state. And that you have an input corresponding to each field.

Try something like this: https://codesandbox.io/s/magical-fog-tfq3q

class App extends React.Component {
  state = {
    favorites: [
      { name: "animal", value: "" },
      { name: "city", value: "" },
      { name: "song", value: "" },
      { name: "place", value: "" },
      { name: "food", value: "" },
      { name: "sport", value: "" }
    ],
    emptyFields: null
  };

  handleOnChange = event => {
    const { favorites } = this.state;

    let updatedArr = favorites.map(favorite => {
      if (favorite.name === event.target.name) {
        return {
          ...favorite,
          value: event.target.value
        };
      } else {
        return favorite;
      }
    });

    let emptyFields = updatedArr.filter(favorite => {
      return favorite.value.length === 0;
    });

    this.setState({
      ...this.state,
      favorites: updatedArr,
      emptyFields: emptyFields
    });
  };

  createFavoriteInputs = () => {
    const { favorites } = this.state;
    return favorites.map(favorite => {
      return (
        <div key={favorite.name}>
          <label>{favorite.name} :</label>
          <input
            value={favorite.value}
            name={favorite.name}
            onChange={this.handleOnChange}
          />
        </div>
      );
    });
  };
  render() {
    const { emptyFields } = this.state;
    return (
      <div>
        {this.createFavoriteInputs()}
        <button
          disabled={!emptyFields || emptyFields.length > 0 ? true : false}
        >
          Submit
        </button>
        {!emptyFields ||
          (emptyFields.length > 0 && (
            <div>
              The following fields are required:
              <ul>
                {this.state.emptyFields.map(field => {
                  return <li key={field.name}>{field.name}</li>;
                })}
              </ul>
            </div>
          ))}
      </div>
    );
  }
}

So now with the emptyFields state, we have a button that is disabled if there are any emptyFields.

handleOnChange() helps us navigate the right state-value to update in our array, creating a new array in our state whenever we make an update to one of the inputs on the form.

How to properly change state value of array of objects?

1 Answers1