CODEWITHSUNDEEP
htmlreactjs
Matt
Matt

Reputation: 25

How can I select a state property object name dinamically to change one of its properties(childs?) on react?

I have a class with this state properties.

state = {
    step: 1,
    clientName: '',
    icecreamFlavors: {
      vanilla: false,
      chocolate: false,
      mintChocolateChip: false
    },
    toppings: {
      sprinkles: false,
      caramel: false,
      whippedCream: false
    someOtherProperty1: '',
    someOtherProperty2: ''
  };

Short version of the question without needing to read all: how can a make the last part of this statement "dynamic". so change: this.state.icecreamFlavors to this.state.<variable-here>

This properties are updated from a html form that consists of two types of fields text and checkboxes. To update the text properties I use this method.

handleChange = (input: any) => (e: { target: { value: any } }) => {
    this.setState({ [property]: e.target.value });
  };

and for the checkboxes I'm using this other method that works only for "icecreamFlavors" and that's what I want to fix (as i want to create a generic method instead of repeating the same method for every property with children):

handleCheckboxChange = (parentProperty: any, property: any) => (e: { target: { checked: any} }) => {
    this.setState({[parentProperty]: {...this.state.icecreamFlavors, [property]: e.target.checked} })
  };

This works as intended and lets me update the "icecreamFlavors" bools, but i want to make the "handleCheckboxChange" generic to be able to use it with any other property (Eg: toppings).

The html field looks like this (extract with only the checkboxes for simplicity):

<input
        type="checkbox"
        name="vanilla"
        onChange={handleCheckboxChange('icecreamFlavors','vanilla')}
      />
      <br />
      <input
        type="checkbox"
        name:"chocolate"
        onChange={handleCheckboxChange('icecreamFlavors','chocolate')}
      />
      <br />
      <input
        type="checkbox"
        name:"mintChocolateChip"
        onChange={handleCheckboxChange('icecreamFlavors','mintChocolateChip')}
      />
      <br />
      <input
        type="checkbox"
        name:"sprinkles"
        onChange={handleCheckboxChange('toppings','sprinkles')}
      />
      <br />
      <input
        type="checkbox"
        name:"caramel"
        onChange={handleCheckboxChange('toppings','caramel')}
      />

What I want to achieve is to change the "handleCheckboxChange" method to work something like this (this code does not run...)

handleCheckboxChange = (parentProperty: any, property: any) => (e: { target: { checked: any} }) => {
    this.setState({[parentProperty]: {...this.state.parentProperty, [property]: e.target.checked} })
  };

so that ...this.state.icecreamFlavors is dynamic like ...this.state.parentProperty

I have made some attempts like this.setState({[parentProperty]: {...[parentProperty], [property]: e.target.checked} }) or this.setState({[parentProperty]: {parentProperty, [input]: e.target.checked} }) but none of my attempts gives me the result I want.

If any more context or information is required please let me know.

Thanks in advance!!!

Upvotes: 1

Views: 71

Answers (1)

Neel Dsouza
Neel Dsouza

Reputation: 1539

Can u try this

const newObj = this.state[parentProperty];
newObj[input] = e.target.checked;
this.setState({[parentProperty]: newObj});

Upvotes: 1

Related Questions