I'm learning React and have managed to create a simple bankcard which has a text field and a button. The text field allows the user to type something in and it will appear on a label. This is achieved by a class component called InsertName. This component, I think I understand, receives the changeName function which is passed down from the Parent <Bankcard /> component. Then it is 'handled' by the handleChange function in the child component <InsertName />. This then successfully copies the text from the text input field to the label.

I also have a reset button which successfully resets the label to blank.

What I want the reset button to also do is to reset the text input field as well.

I've tried creating a separate function outside of all classes to reset the text field but have no idea on how to work this.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Bankcard extends React.Component {
    constructor(props) {
        super(props);

        this.changeName = this.changeName.bind(this);
        this.resetButton = this.resetButton.bind(this);
        this.state = {cardHolderName: ' '}
    }


    changeName(newName){
        this.setState({cardHolderName: newName})
    }

    resetButton(){
        this.setState({cardHolderName: ' '})
    }

    render() {
        const cardDetails = sampleInfo[0];
        return (
            <div className="cssmainbox">
            <InsertName onChange={this.changeName}/>
            <div className="csslabel">
            <label>{this.state.cardHolderName}</label>
            </div>
            <div className="cssbutton"></div>
            <ResetButton onClick={this.resetButton}/>           
            <br></br>
            <br></br>
            <div className="cssmainnum">
                {cardDetails.mainnum}
            </div>
        </div>
        )
    }
}

// resetTextField = (reset) => {
//     const reset = {this.}
// }


const sampleInfo = [
    {

    mainnum: 123456789,
    validthru: "08/19",
    vsc: 1234
    },
]

class InsertName extends React.Component {
      constructor(props) {
          super(props);

          this.handleChange = this.handleChange.bind(this);
      }

handleChange(e) {
    const name = e.target.value;
    this.props.onChange(name);
}

    render() {

          return (
              <div>
                  <input type="text"
                         name="theusersname"
                         onChange={this.handleChange}>
                </input>
              </div>
          )
      }
}

class ResetButton extends React.Component {
    constructor(props) {
        super(props);

        this.handleClick = this.handleClick.bind(this);
    }

handleClick(e) {
    const name = e.target.value;
    this.props.onClick(name);
}



    render() {

        return (
            <div>
                <button onClick={this.handleClick}/>
            </div>
        )
    }
}

ReactDOM.render(<Bankcard />, document.getElementById('root'));

The css if you want to quickly look at it:

.cssmainbox {
    width: 600px;
    height: 300px;
    border: 15px solid green;
    padding: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

}

.cssmainnum {
font-size: 80px
}

.cssvalidthru {
  font-size: 20px
}

.cssbutton {
  border-radius: 5px;

What I want the reset button to also do is to reset the text input field as well.

Is there a better way to write this whole thing? I'm thinking just using functions instead of classes or because of it's interactivity is a stateful class as a parent and stateless children necessary?

1 Answers

1
Prabu samvel On Best Solutions

Here your working code

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class Bankcard extends React.Component {
  constructor(props) {
    super(props);
    this.changeName = this.changeName.bind(this);
    this.resetButton = this.resetButton.bind(this);
    this.state = { cardHolderName: " " };
  }

  changeName(e) {
    this.setState({ cardHolderName: e.target.value });
  }

  resetButton() {
    this.setState({ cardHolderName: " " });
  }

  render() {
    return (
      <div className="cssmainbox">
        <InsertName
          onNameChange={this.changeName}
          //you can pass the cardHolderName along with the changeName function.
          cardHolderName={this.state.cardHolderName}
        />
        <div className="csslabel">
          <label>{this.state.cardHolderName}</label>
        </div>
        <div className="cssbutton" />
        <ResetButton onResetClick={this.resetButton} />
      </div>
    );
  }
}

function InsertName(props){
  return (
    <div>
        <input
        type="text"
        name="theusersname"
        onChange={props.onNameChange}
        value={props.cardHolderName}
        />
    </div>
  );
}

function ResetButton(props) {
  return (
    <div>
      <button onClick={props.onResetClick}>Reset</button>
    </div>
  );
}

ReactDOM.render(<Bankcard />, document.getElementById("root"));

Here is the working fiddle

Hope it will help you.

Edited

Updated InsertName & ResetButton to functional component and updated the fiddle.