React - setState with spread operator return a proxy object

Question

This is my code, i don't know why but the _onChangeValue function is always returning a proxy object instead of a simple string value. My this.state.values is a long object with a lot of properties, that's why i have to use the spread operator, the function takes two parameters to set the state, i tried a lot of times and even copied the code of the creator but keeps failing, is there any solution?

this is the function

_onChangeValue = (name, value) => {
    this.setState(prevState => ({
      values: {
        ...prevState.values,
        [name]: value,
      },
    }));
  };

and these are the files

App.js

import React, { PureComponent } from 'react';

import Step from './Step';

export default class Wizard extends PureComponent {
  static Step = Step;

  state = {
    index: 0,

    values: {
      ...this.props.initialValues,
    },
  };

  _nextStep = () => {
    if (this.state.index !== this.props.children.length - 1) {
      this.setState(prevState => ({
        index: prevState.index + 1,
      }));
    }
  };

  _prevStep = () => {
    if (this.state.index !== 0) {
      this.setState(prevState => ({
        index: prevState.index - 1,
      }));
    }
  };

  _onChangeValue = (name, value) => {
    this.setState(prevState => ({
      values: {
        ...prevState.values,
        [name]: value,
      },
    }));
  };

  _onSubmit = () => {
    alert(JSON.stringify(this.state.values));
  };

  render() {
    console.log('values', this.state);
    return (
      <div style={{ flex: 1 }}>
        {React.Children.map(this.props.children, (el, index) => {
          if (index === this.state.index) {
            return React.cloneElement(el, {
              currentIndex: this.state.index,
              nextStep: this._nextStep,
              prevStep: this._prevStep,
              isLast: this.state.index === this.props.children.length - 1,
              onChangeValue: this._onChangeValue,
              values: this.state.values,
              onSubmit: this._onSubmit,
            });
          }

          return null;
        })}
      </div>
    );
  }
}

Wizard.js

 import React, { PureComponent } from 'react';

    import Step from './Step';

    export default class Wizard extends PureComponent {
      static Step = Step;

      state = {
        index: 0,

        values: {
          ...this.props.initialValues,
        },
      };

      _nextStep = () => {
        if (this.state.index !== this.props.children.length - 1) {
          this.setState(prevState => ({
            index: prevState.index + 1,
          }));
        }
      };

      _prevStep = () => {
        if (this.state.index !== 0) {
          this.setState(prevState => ({
            index: prevState.index - 1,
          }));
        }
      };

      _onChangeValue = (name, value) => {
        this.setState(prevState => ({
          values: {
            ...prevState.values,
            [name]: value,
          },
        }));
      };

      _onSubmit = () => {
        alert(JSON.stringify(this.state.values));
      };

      render() {
        console.log('values', this.state);
        return (
          <div style={{ flex: 1 }}>
            {React.Children.map(this.props.children, (el, index) => {
              if (index === this.state.index) {
                return React.cloneElement(el, {
                  currentIndex: this.state.index,
                  nextStep: this._nextStep,
                  prevStep: this._prevStep,
                  isLast: this.state.index === this.props.children.length - 1,
                  onChangeValue: this._onChangeValue,
                  values: this.state.values,
                  onSubmit: this._onSubmit,
                });
              }

              return null;
            })}
          </div>
        );
      }
    }

Step.js

import React, { PureComponent } from 'react';

class Step extends PureComponent {
  state = {};
  render() {
    return (
      <div>
        {this.props.children({
          onChangeValue: this.props.onChangeValue,
          values: this.props.values,
        })}
        <div>
          <button
            title="Prev"
            disabled={this.props.currentIndex === 0}
            onClick={this.props.prevStep}
          >Prev</button>
          {this.props.isLast ? (
            <button  onClick={this.props.onSubmit}></button>
          ) : (
            <button  onClick={this.props.nextStep}>Next</button>
          )}
        </div>
      </div>
    );
  }
}
export default Step;

Input.js

import React, { PureComponent } from 'react';

class Input extends PureComponent {
  _onChangeText = text => {
    this.props.onChangeValue(this.props.name, text);
  };

  render() {
    const { onChangeValue, name, ...rest } = this.props;
    return (
      <input {...rest} onChange={this._onChangeText} />
    );
  }
}

export default Input;

Thanks !

Could you include the code showing how you are using this `_onChangeValue` function? — Tholle, Aug 09 '18 at 03:29

score 1 · Accepted Answer · answered Aug 09 '18 at 04:08

1

<input {...rest} onChange={this._onChangeText} />

The event object is passed as the first argument to _onChangeText and not the text from the input field. You can get the text from event.target.value.

<input {...rest} onChange={event => this._onChangeText(event.target.value)} />

answered Aug 09 '18 at 04:08

Arun Kumar Mohan

11,517
3
23
44

omg ! that was a silly error! but this code is from the youtuber i saw, how it doesn't work? haha thanks so much !! – Leandro Aranguez Aug 09 '18 at 04:19
No worries! Have fun with the project :) – Arun Kumar Mohan Aug 09 '18 at 04:19

React - setState with spread operator return a proxy object

1 Answers1