CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
MountainConqueror
MountainConqueror

Reputation: 602

React and material-ui - Raised Button - how to achieve always disabling the clicked buttons?

This is my Buttons component code:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  button: {
    margin: 2,
    padding: 0,
    minWidth: 1,
  },
};

const Buttons = props => {
  const arrayFromInput = props.array;
  const buttonsArray = [];

  for (let i = 1; i <= arrayFromInput; i++) {
    buttonsArray.push(i);
  }

  const handleButtonSelectZero = props.handleButtonSelectOne;

  const allButtons = buttonsArray.map(el => (
    <RaisedButton
      key={el}
      label={el}
      style={style.button}
      onClick={() => handleButtonSelectZero(el)}
    />
  ));

  if (arrayFromInput > 0) {
    return <div>{allButtons}</div>;
  }

  return <div />;
};

export default Buttons;

In material-ui docs is info that to achieve Raised Button disabled state we should add disabled={true} to it.

My coding problem/question:

What should I add to this component code to have particular Rasied Button get disabled after that particular button is clicked?

enter image description here

EDIT:

SOLUTION:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  button: {
    margin: 2,
    padding: 0,
    minWidth: 1,
  },
};

const Buttons = props => {
  const arrayFromInput = props.array;
  const buttonsArray = [];

  for (let i = 1; i <= arrayFromInput; i++) {
    buttonsArray.push(i);
  }

  const handleButtonSelectZero = props.handleButtonSelectOne;

  const allButtons = buttonsArray.map(el => (
    <MyButton key={el} onClick={handleButtonSelectZero} el={el} />
  ));

  if (arrayFromInput > 0) {
    return <div>{allButtons}</div>;
  }

  return <div />;
};

class MyButton extends React.Component {
  constructor() {
    super();
    this.state = { disabled: false };
  }
  handleClick = () => {
    this.setState({ disabled: !this.state.disabled });
    this.props.onClick(this.props.el);
  };
  render() {
    return (
      <RaisedButton
        disabled={this.state.disabled}
        key={this.props.el}
        label={this.props.el}
        style={style.button}
        onClick={() => this.handleClick()}
      />
    );
  }
}

export default Buttons;

Upvotes: 0

Views: 6390

Answers (2)

Kiailandi
Kiailandi

Reputation: 1

If you just need to disable it you can expand the

onClick={() => handleButtonSelectZero(el)}

like this onClick={() => {handleButtonSelectZero(el);this.disabled=true}};

EDIT: fixed missing {}

Upvotes: 0

Viljar Rolfsen
Viljar Rolfsen

Reputation: 71

You need to use state somehow, i think i would do something like this: 

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  button: {
    margin: 2,
    padding: 0,
    minWidth: 1,
  },
};

const Buttons = props => {
  const arrayFromInput = props.array;
  const buttonsArray = [];

  for (let i = 1; i <= arrayFromInput; i++) {
    buttonsArray.push(i);
  }

  const handleButtonSelectZero = props.handleButtonSelectOne;

  const allButtons = buttonsArray.map(el => (
   <MyButton onClick={handleButtonSelectZero} el={el} />
  ));

  if (arrayFromInput > 0) {
    return <div>{allButtons}</div>;
  }

  return <div />;
};

class MyButton extends React.Component {
  constructor() {
    super()
    this.state = { disabled: false }
  }
  handleClick = () => {
    this.setState({ disabled: !this.state.disabled })
    this.props.onClick(this.props.el)
  }
  render() {
    return (
      <RaisedButton
        disabled={this.state.disabled}
        key={this.props.el}
        label={this.props.el}
        style={style.button}
        onClick={() => handleButtonSelectZero(el)}
      />
    )
  }
}

export default Buttons;

I have not tested it, but hopefully it can guide you in the correct direction.

Upvotes: 2

Related Questions