如何禁用重复列表上的单击按钮

Question

I have a code that disables a button when clicking on it, this works, but it's disabling all the buttons I have on the screen.

This is the part of code:

  constructor(props) {
    super(props);
    autoBind(this);
    this.state = { isLoading: false };
  }
  
  
  handleFile(file) {
    const id = file.id; // Maybe I can use this id

    this.setState({ isLoading: true });
    if (document.statusCode == 200) {
      this.setState({ isLoading: false });
    } 
  }


  _renderButton(text, props) {
    const isFile = (props.type.toLowerCase() === 'file');
    return (
      <Row>
        {isFile && (
          <Button disabled={this.state.isLoading} onClick={(e) => { e.stopPropagation(); this.handleFile(props)}} />
        )}
        {props.deleted ? // some code : // another code }
      </Row>
    );
  }

How can I disable just the clicked button using react?

Thank you in advance who can help me with this.

Answer 1

If you have three buttons you can toggle them individually like this.

constructor(props) {
    super(props);
    autoBind(this);
    this.state = { isLoading: [false,false,false] };
  }
  
  
  handleFile(file,index) {
    const id = file.id; // Maybe I can use this id

    this.setState({ isLoading: true });
    if (document.statusCode == 200) {
      const newLoading = this.state.isLoading;
      newLoading[index] = true;

      this.setState({ isLoading: newLoading });
    } 
  }


  _renderButton(text, props,index) {
    const isFile = (props.type.toLowerCase() === 'file');
    return (
      <Row>
        {isFile && (
          <Button disabled={this.state.isLoading[index]} onClick={(e) => { e.stopPropagation(); this.handleFile(props)}} />
        )}
        {props.deleted ? // some code : // another code }
      </Row>
    );
  }