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.

The location of your number rendering needs a function to clear itself. But you aren't going to use it in that component. You make it to pass it down to the child that is supposed to clear the inputs. Remember to bind that function when you pass it. If you need more help than that, just tell me. — Andrew
– Andrew, Commented Oct 4, 2017 at 3:39
I think I get what you mean- I've been trying it out in the edit of the OP, those two files relating to the buttons- but I keep getting an error on that conditional statement, i.e. <button className={numberClass} onClick={() => {clearTheForm ? clearTheForm() : addLogicToEquation(number)}}> — user8620648
– user8620648, Commented Oct 4, 2017 at 3:45

Andrew · Accepted Answer · 2017-10-04 03:57:48Z

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)}}>

answered Oct 4, 2017 at 3:57

Andrew

7,5855 gold badges28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viki Theolorado · Accepted Answer · 2017-10-04 03:58:48Z

0

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>
        );
      }
    }

edited Oct 4, 2017 at 3:58

answered Oct 4, 2017 at 3:49

Viki Theolorado

5865 silver badges20 bronze badges

2 Comments

user8620648 Over a year ago

yeah - but where and how to call that?

Viki Theolorado Over a year ago

You can pass the clearTheForm function as props to ButtonNumberContainer like you passing addLogicToEquation function. See my edited answer.

Collectives™ on Stack Overflow

react reset button clear text input area, javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related