Trying to change all the components into es6

Question

• I am trying to change all the components into es6
• I did for two but not sure how to do for the third one.
• can you tell me how to change it?

• providing my code below.

  export default class FirstTimeTab extends React.Component{
  
    getInitialState(){
      return {
         'panes' : [
  
          <div className="sports-tab-content">
              <p className="sports-large-text ft-day1 ft-day2">
  

Answer 1

this is unavailable in that method.. when you call this.changeContent on line 60 change it to this.changeContent.bind(this). That will bind your component instance to the method.

you can also do this in a constructor if you want to by adding: this.changeContent = this.changeContent.bind(this) inside the constructor below super(props), then you can use the method as you have it

Can read more about bind here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 2

You had multiple small errors, one after another, that needed to be fixed. I highly recommend you make smaller changes so you can track more easily what goes wrong during development.

Updated Fiddle

First, remove export default from export default class FirstTimeTab extends React.Component. This isn't necessary when working in a single-file Fiddle like we are doing here.

That leaves you with

class FirstTimeTab extends React.Component {
  ...

Running from there will give you the console error that App is undefined:

ReactDOM.render(<App />, document.querySelector('.container'));

Which is entirely true, since you changed App to FirstTimeTab. After changing this to use <FirstTimeTab />, you'll get yet another helpful console error that:

> getInitialState was defined on FirstTimeTab, a plain JavaScript class. This is
only supported for classes created using React.createClass. Did you mean to
define a state property instead?

This message is pretty clear: you can't use getInitialState with the class syntax. Instead, change to the more clear method of setting the initial state property in the constructor:

constructor() {
  super();
  this.state = {
    'panes' : [
       <div className="sports-tab-content">
       ...

Finally, you still won't see anything until you properly display your content. You were setting the content in the content attribute of each Pane, when it seems like the rest of your code expects it to be passed as children (which is the more correct way in React):

render () {
  return (
    <Tabs selected={0} changeContent={this.changeContent}>
      <Pane label="Account Setup" subtitle="Days 1 and 2" liClass="sports-setup-ico first-time-active ft-active-tab">
        {this.state.panes[0]} // Content passed as children
      </Pane>
     ...

Edit for followup:

You've been specifying required props with these bits of code:

Pane.propTypes = {
  label: React.PropTypes.string.isRequired,
  children: React.PropTypes.element.isRequired
};

The above states, for examples, that you require a label and children for the Pane.

If your error is Required prop content was not specified in Pane, this means somewhere in your code you are requiring content as an attribute. In my answer above, I recommended you switch from passing your content in content to passing it through the children property. If you followed that advice, just remove the line that causes this requirement. It should look like the piece of code I added above, though I saw no evidence of that in your original Fiddles. Maybe it was something you added later.