reactjsformsreact-nativereact-hooksreact-hook-form

how do I hide/display the submit button in React JS


I have to hide the Submit button initially, when keyin to dates fields then Submit button should be display.

class MyForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = { startdate: '', enddate: '' };
    }
    mySubmitHandler = (event) => {
      event.preventDefault();
      alert("You are submitting " + this.state.startdate +"and"+ this.state.enddate);
    }
    myChangeHandler = (event) => {
      this.setState({startdate: event.target.value});
    }

    myEndDate = (event) => {
        this.setState({enddate: event.target.value});
      }

    render() {
      return (
        <form onSubmit={this.mySubmitHandler}>
        <img src="C:\\Users\\A9002255\\Desktop\is.jpg"></img>
        <h2>Please select the Date range of .CSV </h2>
       
        <input
          type='date'
          onChange={this.myChangeHandler}
        />
        <span>   </span>
       <input
          type="date"
          onChange={this.myEndDate}
        />
        <div>
        <input
          type='submit' value="Download" class="bi bi-cloud-arrow-down"  style={{ width: '10%', height: 30}}
        />
        </div>
        </form>
      );
    }
  }
  ReactDOM.render(<MyForm />, document.getElementById('root'));

  export default MyForm;

Solution

  • You can add check on base of start and end dates of your state. Try following code

       class MyForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = { startdate: '', enddate: '' };
    }
    mySubmitHandler = (event) => {
      event.preventDefault();
      alert("You are submitting " + this.state.startdate +"and"+ this.state.enddate);
    }
    myChangeHandler = (event) => {
      this.setState({startdate: event.target.value});
    }
    
    myEndDate = (event) => {
        this.setState({enddate: event.target.value});
      }
    
    render() {
      return (
        <form onSubmit={this.mySubmitHandler}>
        <img src="C:\\Users\\A9002255\\Desktop\is.jpg"></img>
        <h2>Please select the Date range of .CSV </h2>
       
        <input
          type='date'
          onChange={this.myChangeHandler}
        />
        <span>   </span>
       <input
          type="date"
          onChange={this.myEndDate}
        />
        <div>
        {this.state.startdate && this.state.enddate && <input
          type='submit' value="Download" class="bi bi-cloud-arrow-down"  style={{ width: '10%', height: 30}}
        />}
        </div>
        </form>
      );
    }
    
    
    }
    ReactDOM.render(<MyForm />, document.getElementById('root'));
    
    export default MyForm;