CODEWITHSUNDEEP
reactjs
Elder
Elder

Reputation: 363

React Cannot read property 'getAttribute' of undefined

I get the following error when trying to compile my app TypeError: Cannot read property 'getAttribute' of undefined.

I'm having trouble tracking down why in this line: if (event.target.getAttribute('name') && !sectionsClicked.includes(event.target.getAttribute('name'))) { is error

Here is the main react component

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progressValue: 0,
      sectionsClicked: [],
    };

    this.handleProgress = this.handleProgress.bind(this);
  }


  handleProgress = (event) => {
    const { progressValue } = this.state;
    console.log(progressValue);
    const { sectionsClicked } = this.state;
    if (event.target.getAttribute('name') && !sectionsClicked.includes(event.target.getAttribute('name'))) {
      this.setState({
        progressValue: Math.floor((sectionsClicked.length / 77) * 100),
        sectionsClicked: sectionsClicked.push(event.target.getAttribute('name')),
      });
      console.log(sectionsClicked);
    }
  };

  render() {
    const { questions } = this.props;
    const { progressValue } = this.state;
    const groupByList = groupBy(questions.questions, 'type');
    const objectToArray = Object.entries(groupByList);


    return (
      <>
        <Progress value={progressValue} />
        <div className="text-center mt-5">
          <ul>
            {questionListItem && questionListItem.length > 0 ?
              (
                <Wizard
                  onChange={(event) => this.handleProgress(event)}
                  initialValues={{ employed: true }}
                  onSubmit={() => {
                    window.alert('Hello');
                  }}
                >
                  {questionListItem}
                </Wizard>
              ) : null
            }
          </ul>
        </div>
      </>
    );
  }
}

Upvotes: 1

Views: 1388

Answers (3)

Chris
Chris

Reputation: 6631

Also, take a look at your methods and binding. You're actually using three separate approaches to fix the context of your handleProgress function.

For more information, look at this answer:

Can you explain the differences between all those ways of passing function to a component?

Upvotes: 1

salezica
salezica

Reputation: 76949

The <FormSpy> component that originally calls onChange in <Wizard>, which you report upwards to <App>, passes a parameter that is not an event. It's of type FormState.

On that type, the target property is undefined, thus the error you're seeing.

If you see the properties of that object in the documentation, you'll probably get what you want by checking the dirty fields of the form, and finding the associated DOM elements.

In all likelihood, though, you can find a way of achieving the desired behavior without resorting to DOM attributes at all. The very same dirtyFields property has the names you might be looking for.

Upvotes: 1

Kabbany
Kabbany

Reputation: 515

As per the docs:

https://github.com/final-form/react-final-form#onchange-formstate-formstate--void

The expected param passed to onChange is formState not event. Try logging the parameter passed to the function it might have the changes you need.

Upvotes: 1

Related Questions