CODEWITHSUNDEEP
reactjsreference
lost9123193
lost9123193

Reputation: 11030

React Uncaught Reference Error

I am using redux wizard forms and I have a component called HEADER that changes text depending on the state's page number. I can change the title property of header to each page but I want to change the subtitle property so I can do something like this: 

subtitle={this.state.subtitle }

I thought I could call a function called updateComponents() and do a switch statement to see what subtitle should be updated but the code below gives me this:

ReferenceError: updateComponents is not defined.

I'm not sure what I'm doing wrong or if this is the best way to update a state. 

import React, { Component, PropTypes } from 'react'
import Step1Page from './step1Page'
import Step2Page from './step2Page'
import Step3Page from './step3Page'
import Header from '../Template/header';

class NewSign extends Component {
  constructor(props) {
    super(props)

    this.nextPage = this.nextPage.bind(this)
    this.previousPage = this.previousPage.bind(this)
    this.updateComponents = this.updateComponents.bind(this)
    this.state = {
      page: 1,
      subtitle:"Basic Info"
    }
  }

  updateComponents(){
    console.log(this.state.page);
  }


  nextPage() {
    this.setState({ page: this.state.page + 1 })
    updateComponents();
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 })
    updateComponents();
  }


  render() {
    const { onSubmit } = this.props
    const { page } = this.state
    return (
        <div className="container">
            <Header 
            title={"Step " + this.state.page } 
            subtitle="Basic Info" />

          {page === 1 && <Step1Page onSubmit={this.nextPage}/>}
          {page === 2 && <Step2Page previousPage={this.previousPage} onSubmit={this.nextPage}/>}
          {page === 3 && <Step3Page previousPage={this.previousPage} onSubmit={this.nextPage}/>}
      </div>

    )
  }
}

NewCampaign.propTypes = {
  onSubmit: PropTypes.func.isRequired
}

export default NewSign

Upvotes: 0

Views: 433

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

Edit your code. You must call a function using a this statement.

import React, { Component, PropTypes } from 'react'
import Step1Page from './step1Page'
import Step2Page from './step2Page'
import Step3Page from './step3Page'
import Header from '../Template/header';

class NewSign extends Component {
  constructor(props) {
    super(props)

    this.nextPage = this.nextPage.bind(this)
    this.previousPage = this.previousPage.bind(this)
    this.updateComponents = this.updateComponents.bind(this)
    this.state = {
      page: 1,
      subtitle:"Basic Info"
    }
  }

  updateComponents(){
    console.log(this.state.page);
  }


  nextPage() {
    this.setState({ page: this.state.page + 1 })
    this.updateComponents();
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 })
    this.updateComponents();
  }


  render() {
    const { onSubmit } = this.props
    const { page } = this.state
    return (
        <div className="container">
            <Header 
            title={"Step " + this.state.page } 
            subtitle="Basic Info" />

          {page === 1 && <Step1Page onSubmit={this.nextPage}/>}
          {page === 2 && <Step2Page previousPage={this.previousPage} onSubmit={this.nextPage}/>}
          {page === 3 && <Step3Page previousPage={this.previousPage} onSubmit={this.nextPage}/>}
      </div>

    )
  }
}

NewCampaign.propTypes = {
  onSubmit: PropTypes.func.isRequired
}

export default NewSign

Upvotes: 1

Related Questions