In my ponenet, I have two buttons for which I want the onClick function to change depending on the ponent state.

Is it possible to assign function references to state variables?

For instance

 constructor() {
       this.foo = this.foo.bind(this);
       this.bar = this.bar.bind(this);
       this.state = {
         buttonMessage: "hello",
         buttonFunction: foo
       }
      }

    foo() {
      this.setState({
        buttonFunction: bar
      })
    }

    bar() {
      this.setState({
        buttonFunction: foo
      })
    }
   }

When I try the above code, I get an error saying that foo and bar are not defined. Perhaps this is just a syntax error? Would be nice to know if it is even possible to assign function references to the state variables.

In my ponenet, I have two buttons for which I want the onClick function to change depending on the ponent state.

Is it possible to assign function references to state variables?

For instance

 constructor() {
       this.foo = this.foo.bind(this);
       this.bar = this.bar.bind(this);
       this.state = {
         buttonMessage: "hello",
         buttonFunction: foo
       }
      }

    foo() {
      this.setState({
        buttonFunction: bar
      })
    }

    bar() {
      this.setState({
        buttonFunction: foo
      })
    }
   }

When I try the above code, I get an error saying that foo and bar are not defined. Perhaps this is just a syntax error? Would be nice to know if it is even possible to assign function references to the state variables.

• javascript
• reactjs
• state

Share Improve this question Follow edited Jul 12, 2017 at 9:12 Flux asked Jul 12, 2017 at 8:52 FluxFlux 41922 gold badges55 silver badges2121 bronze badges 4

• 1 Why not give it a try? – Yury Tarabanko Commented Jul 12, 2017 at 8:54
• 1 I did and I get errors that foo is not defined. Perhaps it is syntax, perhaps not. This is why I ask. – Flux Commented Jul 12, 2017 at 8:55
• 1 Right, but this has nothing to do with the state. You need buttonFunction: this.bar – Yury Tarabanko Commented Jul 12, 2017 at 8:57
• Thanks a lot, it worked by adding "this". – Flux Commented Jul 12, 2017 at 9:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Is this something like this you want?

// import React from 'react';

class HelloKitty extends React.Component {
  constructor(args) {
    super(args);
    this.foo = this.foo.bind(this);
    this.bar = this.bar.bind(this);

    this.state = {
      buttonMessage: "hello",
      buttonFunction: this.foo
    };
  }

  foo() {
    this.setState({
      buttonFunction: () => alert('foo'),
    })
  }

  bar() {
    this.setState({
      buttonFunction: () => alert('bar'),
    })
  }


  render() {
    return (
      <div className="root">
        <div>
          <span onClick={this.foo}>I'am foo</span>
          <span onClick={this.bar}>I'am bar</span>
        </div>

        <span onClick={this.state.buttonFunction}>{this.state.buttonMessage}</span>
      </div>
    );
  }
}

ReactDOM.render(
  <HelloKitty />,
  document.getElementById('container')
);

.root {
  display: flex;
  flex-direction: column;
  width: 50%;
}
  
.root div {
  display: flex;
  justify-content: space-between;
}

span {
  border: 1px solid black;
  margin: 30px;
  padding: .5em;
  width: 100px;
  cursor: pointer;
}
span:hover {
  background-color: #8f8;
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id=container></div>

Simple answer concluded from discussion in ments to the original question: Yes, it is possible.

The problem I had in my example was that I forgot to use "this" when assigning the function reference in this.setState({buttonFunction: foo}), it should be this.setState({buttonFunction: this.foo}).

The following code will work:

 constructor() {
       this.foo = this.foo.bind(this);
       this.bar = this.bar.bind(this);
       this.state = {
         buttonMessage: "hello",
         buttonFunction: this.foo
       }
      }

    foo() {
      this.setState({
        buttonFunction: this.bar
      })
    }

    bar() {
      this.setState({
        buttonFunction: this.foo
      })
    }
   }

Big thanks to Yury Tarabanko for providing assistance.

For functional ponent:

 const [state, setState] = useState({
    viewToBarChange: "",
  });

<Tree
    setViewToBarChange={(callBack) => {
     setState({ ...state, viewToBarChange: callBack });
      }}
  >
</Tree>