react reset button clear text input area, javascript

Question

Here are my buttons, I've been trying to clear out all the text input, with the last one there, ButtonNumber number="R" . My idea was that I could just call the constructor() again from that button- and that this would reset my state, and essentially perform the task of a reset button- however, this is not the case, you can see it at the end there:

import React, { Component, PropTypes } from 'react';
import ButtonNumber from './ButtonNumber.js'

export default class ButtonNumberContainer extends Component {
  render() {
    return(
      <div className="numbers">
        <div className="btn-number-container">
          <ButtonNumber number="0" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="1" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="2" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="3" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="4" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="5" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="6" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="7" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="8" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="9" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="R" addLogicToEquation={this.props.constructor()} ></ButtonNumber>
        </div>
      </div>
    )
  }
}

The app front end looks like this:

There's some code here that assigns functions to the buttons- maybe I'll need to define some kind of a "clear" function and call it from somewhere like here:

import React, { Component } from 'react';

export default class ButtonEquation extends Component {
  render() {
    const { equation, addLogicToEquation, evalEquation } = this.props
    const equationClass = "btn btn-equation-" + equation

    return (
      <button className={equationClass} onClick={() => {evalEquation ? evalEquation() : addLogicToEquation(equation)}}>
        {equation}
      </button>
    )
  }
}

The full code base lives here .

---

EDIT

This file:

import React, { Component, PropTypes } from 'react';
import ButtonNumber from './ButtonNumber.js'

export default class ButtonNumberContainer extends Component {
  render() {
    return(
      <div className="numbers">
        <div className="btn-number-container">
          <ButtonNumber number="0" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="1" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="2" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="3" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="4" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="5" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="6" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="7" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="8" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="9" addLogicToEquation={this.props.addLogicToEquation} ></ButtonNumber>
          <ButtonNumber number="R" clearTheForm={this.props.clearTheForm} ></ButtonNumber>
        </div>
      </div>
    )
  }
}

Also this one:

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

    export default class ButtonNumber extends Component {
      render() {
        const { number, addLogicToEquation, evalEquation, clearTheForm } = this.props
        const numberClass = " btn btn-number-" + number

        return (
          //<button className={numberClass} onClick={() => {addLogicToEquation(number)}}>
          <button className={numberClass} onClick={() => {clearTheForm ? clearTheForm() : addLogicToEquation(number)}}>
            {number}
          </button>
        )
      }
    }

In the main logic of the application, tried to reset the state:

    class App extends Component {
      constructor() {
        super()
        this.state = {
          equation: 0,
        }

        this.addLogicToEquation = this.addLogicToEquation.bind(this)
        this.evalEquation = this.evalEquation.bind(this)
      }

clearTheForm(){
    this.state = {
    equation: 0,
  }
}

That's what the call to that function was about.

Answer 1

Function to clear rendered numbers, in your App

clearTheForm() {
  this.setState({equation: "0"})
}

In ButtonNumberContainer , remember to bind

<ButtonNumber number="R" clearTheForm={this.props.clearTheForm.bind(this)} ></ButtonNumber>

In ButtonNumber , your functions exist in this.props .

<button className={numberClass} onClick={() => {this.props.clearTheForm ? this.props.clearTheForm() : this.props.addLogicToEquation(number)}}>

Answer 2

I think, what you need is setState function. To update the state and rerun the render function when clearTheForm . Like this.

clearTheForm(){
    this.setState({
      equation: 0
    });
}

Hope this help.

EDIT
You also need to send clearTheForm method as a prop to ButtonNumberContainer .
Like this.

class App extends Component {
      constructor() {
        super()
        this.state = {
          equation: 0,
        }

        this.addLogicToEquation = this.addLogicToEquation.bind(this)
        this.evalEquation = this.evalEquation.bind(this)
        this.clearTheForm = this.clearTheForm.bind(this)
      }

      clearTheForm(){
          this.setState({
            equation: 0
          });
      }

      addLogicToEquation(newLogic) {
          ...
      }

      evalEquation() {
          ...
      }

      render() {
        return (
          <div className="App">
            <Result text={this.state.equation}/>
            <ButtonNumberContainer addLogicToEquation={this.addLogicToEquation} clearTheForm={this.clearTheForm} />
            <ButtonEquationContainer addLogicToEquation={this.addLogicToEquation}
                                     evalEquation={this.evalEquation}/>
          </div>
        );
      }
    }