CODEWITHSUNDEEP
reactjscomponentsstate
lost9123193
lost9123193

Reputation: 11030

Instantiating a Component in React

I'm making a wizard form but I can't get the first component called tableResults to load. I have a state called step which changes depending on the component. Currently the initial state of the step is set to 1. How would I make tableResults show up when the state is 1?

Step1.js snippet

import tableResults from './tableResults';

class Step1 extends Component {
    constructor(props) {
      super(props);
     this.state = {
      step: 1
    }
  }


render() {
  const {
    handleSubmit,
    previousPage,
    step
  } = this.props;


    return (  
      <form onSubmit={handleSubmit}>

        <div className="step-container">

          {step === 1 && <tableResults/>}
          </div>
      </form>
    );
  }
}

Table Snippet:

import React, { Component, PropTypes } from 'react'

class tableResults extends Component {
  constructor(props) {
    super(props)
    }

  render() {

    return (  
      <div>
        This is the table
      </div>
      );
  }
}

Upvotes: 0

Views: 1609

Answers (1)

Aakash Sigdel
Aakash Sigdel

Reputation: 9300

You are getting the state from props, but instead you should get it from state as follows:

import tableResults from './tableResults';

class Step1 extends Component {
    constructor(props) {
      super(props);
     this.state = {
      step: 1
    }
  }


render() {
  const {
    handleSubmit,
    previousPage,
    step
  } = this.props;


    return (  
      <form onSubmit={handleSubmit}>

        <div className="step-container">

          {this.state.step === 1 && <tableResults/>}
          </div>
      </form>
    );
  }
}

Upvotes: 2

Related Questions