Pass Argument to Function Reactjs











up vote
1
down vote

favorite












I am building a tab bar using react-mdl library. I have an activeTab property in my state object to determine which tab was clicked and render the right information.



I have used an onChange method on the tabs holder to fetch the tab id from user click events and passed the id to my function where the activeTab property will be set from events.



This is what I have done so far:



import React, { Component } from 'react';
import { Tabs, Tab } from 'react-mdl';
import './index.css';

class Projects extends Component {

constructor(props){
super(props);

this.state = {
activeTab: 0
}

}

handleTabChange(tabId){
this.setState({
activeTab: tabId
});
console.log(this.state);
}

render() {
return (
<div className="">
<Tabs
activeTab={this.state.activeTab}
onChange={ () => this.handleTabChange(tabId)}>
<Tab>Android</Tab>
<Tab>Web</Tab>
<Tab>Full Stack</Tab>
</Tabs>
</div>
);
}

}

export default Projects;


but when I build the project it crashes in browser with this error:



./src/components/Projects/Projects.js
Line 28: 'tabId' is not defined no-undef

Search for the keywords to learn more about each error.


How can I fix this? Thank you.










share|improve this question






















  • as the error says tabId is an undefined variable. where did you declare it inside the render method?
    – Sagiv b.g
    Nov 7 at 7:59















up vote
1
down vote

favorite












I am building a tab bar using react-mdl library. I have an activeTab property in my state object to determine which tab was clicked and render the right information.



I have used an onChange method on the tabs holder to fetch the tab id from user click events and passed the id to my function where the activeTab property will be set from events.



This is what I have done so far:



import React, { Component } from 'react';
import { Tabs, Tab } from 'react-mdl';
import './index.css';

class Projects extends Component {

constructor(props){
super(props);

this.state = {
activeTab: 0
}

}

handleTabChange(tabId){
this.setState({
activeTab: tabId
});
console.log(this.state);
}

render() {
return (
<div className="">
<Tabs
activeTab={this.state.activeTab}
onChange={ () => this.handleTabChange(tabId)}>
<Tab>Android</Tab>
<Tab>Web</Tab>
<Tab>Full Stack</Tab>
</Tabs>
</div>
);
}

}

export default Projects;


but when I build the project it crashes in browser with this error:



./src/components/Projects/Projects.js
Line 28: 'tabId' is not defined no-undef

Search for the keywords to learn more about each error.


How can I fix this? Thank you.










share|improve this question






















  • as the error says tabId is an undefined variable. where did you declare it inside the render method?
    – Sagiv b.g
    Nov 7 at 7:59













up vote
1
down vote

favorite









up vote
1
down vote

favorite











I am building a tab bar using react-mdl library. I have an activeTab property in my state object to determine which tab was clicked and render the right information.



I have used an onChange method on the tabs holder to fetch the tab id from user click events and passed the id to my function where the activeTab property will be set from events.



This is what I have done so far:



import React, { Component } from 'react';
import { Tabs, Tab } from 'react-mdl';
import './index.css';

class Projects extends Component {

constructor(props){
super(props);

this.state = {
activeTab: 0
}

}

handleTabChange(tabId){
this.setState({
activeTab: tabId
});
console.log(this.state);
}

render() {
return (
<div className="">
<Tabs
activeTab={this.state.activeTab}
onChange={ () => this.handleTabChange(tabId)}>
<Tab>Android</Tab>
<Tab>Web</Tab>
<Tab>Full Stack</Tab>
</Tabs>
</div>
);
}

}

export default Projects;


but when I build the project it crashes in browser with this error:



./src/components/Projects/Projects.js
Line 28: 'tabId' is not defined no-undef

Search for the keywords to learn more about each error.


How can I fix this? Thank you.










share|improve this question













I am building a tab bar using react-mdl library. I have an activeTab property in my state object to determine which tab was clicked and render the right information.



I have used an onChange method on the tabs holder to fetch the tab id from user click events and passed the id to my function where the activeTab property will be set from events.



This is what I have done so far:



import React, { Component } from 'react';
import { Tabs, Tab } from 'react-mdl';
import './index.css';

class Projects extends Component {

constructor(props){
super(props);

this.state = {
activeTab: 0
}

}

handleTabChange(tabId){
this.setState({
activeTab: tabId
});
console.log(this.state);
}

render() {
return (
<div className="">
<Tabs
activeTab={this.state.activeTab}
onChange={ () => this.handleTabChange(tabId)}>
<Tab>Android</Tab>
<Tab>Web</Tab>
<Tab>Full Stack</Tab>
</Tabs>
</div>
);
}

}

export default Projects;


but when I build the project it crashes in browser with this error:



./src/components/Projects/Projects.js
Line 28: 'tabId' is not defined no-undef

Search for the keywords to learn more about each error.


How can I fix this? Thank you.







javascript reactjs






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 7 at 7:55









Darth Plagueris

546




546












  • as the error says tabId is an undefined variable. where did you declare it inside the render method?
    – Sagiv b.g
    Nov 7 at 7:59


















  • as the error says tabId is an undefined variable. where did you declare it inside the render method?
    – Sagiv b.g
    Nov 7 at 7:59
















as the error says tabId is an undefined variable. where did you declare it inside the render method?
– Sagiv b.g
Nov 7 at 7:59




as the error says tabId is an undefined variable. where did you declare it inside the render method?
– Sagiv b.g
Nov 7 at 7:59












1 Answer
1






active

oldest

votes

















up vote
1
down vote



accepted










You are almost there. From the react-mdl examples:



You need to pass the tabId as a parameter to the onChange binding.



onChange={ (tabId) => this.handleTabChange(tabId)}


Full example:



<div className="demo-tabs">
<Tabs activeTab={this.state.activeTab}
onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
<Tab>Starks</Tab>
<Tab>Lannisters</Tab>
<Tab>Targaryens</Tab>
</Tabs>
<section>
<div className="content">Content for the tab: {this.state.activeTab}</div>
</section>
</div>





share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














     

    draft saved


    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53185408%2fpass-argument-to-function-reactjs%23new-answer', 'question_page');
    }
    );

    Post as a guest
































    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    1
    down vote



    accepted










    You are almost there. From the react-mdl examples:



    You need to pass the tabId as a parameter to the onChange binding.



    onChange={ (tabId) => this.handleTabChange(tabId)}


    Full example:



    <div className="demo-tabs">
    <Tabs activeTab={this.state.activeTab}
    onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
    <Tab>Starks</Tab>
    <Tab>Lannisters</Tab>
    <Tab>Targaryens</Tab>
    </Tabs>
    <section>
    <div className="content">Content for the tab: {this.state.activeTab}</div>
    </section>
    </div>





    share|improve this answer

























      up vote
      1
      down vote



      accepted










      You are almost there. From the react-mdl examples:



      You need to pass the tabId as a parameter to the onChange binding.



      onChange={ (tabId) => this.handleTabChange(tabId)}


      Full example:



      <div className="demo-tabs">
      <Tabs activeTab={this.state.activeTab}
      onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
      <Tab>Starks</Tab>
      <Tab>Lannisters</Tab>
      <Tab>Targaryens</Tab>
      </Tabs>
      <section>
      <div className="content">Content for the tab: {this.state.activeTab}</div>
      </section>
      </div>





      share|improve this answer























        up vote
        1
        down vote



        accepted







        up vote
        1
        down vote



        accepted






        You are almost there. From the react-mdl examples:



        You need to pass the tabId as a parameter to the onChange binding.



        onChange={ (tabId) => this.handleTabChange(tabId)}


        Full example:



        <div className="demo-tabs">
        <Tabs activeTab={this.state.activeTab}
        onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
        <Tab>Starks</Tab>
        <Tab>Lannisters</Tab>
        <Tab>Targaryens</Tab>
        </Tabs>
        <section>
        <div className="content">Content for the tab: {this.state.activeTab}</div>
        </section>
        </div>





        share|improve this answer












        You are almost there. From the react-mdl examples:



        You need to pass the tabId as a parameter to the onChange binding.



        onChange={ (tabId) => this.handleTabChange(tabId)}


        Full example:



        <div className="demo-tabs">
        <Tabs activeTab={this.state.activeTab}
        onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
        <Tab>Starks</Tab>
        <Tab>Lannisters</Tab>
        <Tab>Targaryens</Tab>
        </Tabs>
        <section>
        <div className="content">Content for the tab: {this.state.activeTab}</div>
        </section>
        </div>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 7 at 7:59









        dubes

        2,65611928




        2,65611928






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53185408%2fpass-argument-to-function-reactjs%23new-answer', 'question_page');
            }
            );

            Post as a guest




















































































            這個網誌中的熱門文章

            Xamarin.form Move up view when keyboard appear

            Post-Redirect-Get with Spring WebFlux and Thymeleaf

            Anylogic : not able to use stopDelay()