remove the textfield on button click not working reactjs

Question

I have multiple date textfield with close button, on clicking on close(x) should delete the textfield, But not working,( remove the textfield on clicking on close button ) Here is my codelink https://codesandbox.io/s/strange-http-zhj4f

Please read [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a [MCVE] and put it in **the question itself** instead. Stackoverflow does support [inline live demos](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) — Quentin, Feb 18 '20 at 10:25
i found something you missed on your code. please see this question and hope you find it well https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method — gnujoow, Feb 18 '20 at 10:34
please copy the code into the question, [how-to-ask](https://stackoverflow.com/help/how-to-ask) — rMonteiro, Feb 18 '20 at 11:42

score 0 · Answer 1 · answered Feb 18 '20 at 12:19

Try something like this. Make sure you pass the date into the method in you X button. like this

onClick={() => this.textareaHandler(datevalue)}

Here is a working code

import React from "react";
import DatePicker from "react-date-picker";

class AddDate extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      closedatearr: ["12-02-2020", "19-02-2020"]
    };
  }

  buttonHanlder = value => {
    var dateformat = [
      ("0" + value.getDate()).slice(-2) +
        "-" +
        ("0" + (value.getMonth() + 1)).slice(-2) +
        "-" +
        value.getFullYear()
    ];
    this.setState(prevState => ({
      closedatearr: [...prevState.closedatearr, ...dateformat]
    }));
  };

  textareaHandler = val => {
    const { closedatearr } = this.state;
    let removeval = closedatearr.filter(item => item !== val);
    this.setState({
      closedatearr: removeval
    });
  };

  render() {
    const { closedatearr } = this.state;
    return (
      <React.Fragment>
        <div className="row">
          <div className="form-group col-lg-12 col-sm-12">
            <label htmlFor="sortorder" className="floatLeft label2">
              Select Date
            </label>
          </div>
        </div>
        <div className="row">
          <div className="form-group col-lg-12 col-sm-12">
            <DatePicker
              locale="en-GB"
              onChange={value => {
                this.setState({ closedate: value }, () => {
                  this.buttonHanlder(value);
                });
              }}
              value={new Date()}
            />
          </div>
        </div>
        <div className="row">
          <div className="form-group col-lg-12 col-sm-12">
            {closedatearr.map((datevalue, i) => {
              return (
                <div className="text-content" key={i}>
                  <input type="text" value={datevalue} className="inputfield" />
                  <button
                    type="button"
                    onClick={() => this.textareaHandler(datevalue)}
                  >
                    X
                  </button>
                </div>
              );
            })}
          </div>
        </div>
        <div style={{ height: "30px" }} />
      </React.Fragment>
    );
  }
}

export default AddDate;

score 0 · Accepted Answer · answered Feb 18 '20 at 12:44

Better to code your map() this way

{closedatearr.map(datevalue => {
          return (
            <div className="text-content" key={datevalue.toString()}>
              <input type="text" value={datevalue} className="inputfield" readOnly />
              <button
                type="button"
                onClick={() => this.textareaHandler(datevalue)}
              >
                X
              </button>
            </div>
          );
        })}

remove the textfield on button click not working reactjs

2 Answers2