CODEWITHSUNDEEP
reactjsreact-nativereact-reduxreact-router
homerThinking
homerThinking

Reputation: 865

how to disable a button in React imported into another component?

it's my first application in react and I'm not sure how to disable an imported button. I have a component button that I import into a parent component

import React, { Component } from "react";
import "../../index.scss";

class Submit extends Component {
  render() {
    return (
      <button className="button"
      onClick={() => this.props.onClick()}>
        SUBMIT
      </button>
    );
  }
}

export default Submit;

in the component that rendered it is as follows

  renderSubmit() {
    return (
      <Submit
        onClick={() => this.submitForm()}
      />
    );
  }

  render() {
   
    return (
      <div className="table">
        <div className="table-actions">
            {this.renderRefresh()}
            {this.renderSubmit()}
        </div>
      </div>
    );
  }
}

I have tried to set the class to disabled from the original component but it depends on a state property and does not recognize it.

import React, { Component } from "react";
import "../../index.scss";

class Submit extends Component {
  render() {
    return (
      <button className="button"
      disabled={this.state.start}
      onClick={() => this.props.onClick()}>
        SUBMIT
      </button>
    );
  }
}

export default Submit;

How can I condition the disabled state to a state property?

Upvotes: 1

Views: 1407

Answers (1)

Drew Reese
Drew Reese

Reputation: 202846

Your Submit button doesn't allow for setting any other props on the underlying button component. It should proxy though any props you want to be externally configured by what is rendering the Submit button. I also suggest explicitly declaring the button type to be "submit", or also exposing that prop out in the component API.

Your proxying of the onClick handler also drops the click event, that should be passed through in case any consuming component care about it.

class Submit extends Component {
  render() {
    const { disabled, onClick, type = "submit" } = this.props;
    return (
      <button
        className="button"
        disabled={disabled}
        onClick={onClick}
        type={type}
      >
        SUBMIT
      </button>
    );
  }
}

For such a simple component with no internal logic IMO a functional component is a better option, and I would name it more clearly.

const SubmitButton = ({ disabled, onClick, type = "submit" }) => (
  <button
    className="button"
    disabled={disabled}
    onClick={onClick}
    type={type}
  >
    SUBMIT
  </button>
);

Now when you are using the submit button from a parent component you can pass in a disabled prop based on any condition you need/require.

  render() {
    const { submitDisabled } = this.state;
    return (
      <div className="table">
        <div className="table-actions">
          {this.renderRefresh()}
          <SubmitButton
            disabled={submitDisabled} // <-- pass disabled value
            onClick={this.submitForm} // <-- attach click handler
            type="button" // <-- so we don't accidentally take default form action
          />
        </div>
      </div>
    );
  }
}

How you compute/set this.state.submitDisabled is up to you. Maybe it is disabled when the form is being submitted, for example.

submitForm = () => {
  this.setState({ submitDisabled: true });
  ...
};

Upvotes: 2

Related Questions