How to delete a dynamically rendered button after it has been clicked

JavaScript
1

currently have a function that returns the following container. This container renders two buttons dynamically according to the user query. So far if I click one of the button’s, they both disappear, which is what I want.

class respondContainer extends React.PureComponent {
    componentDidMount(){
        var buttons = document.getElementsByClassName('myClass');
        buttons.forEach(btn=>{
            btn.addEventListener("click",(e)=>{
                buttons.forEach(btn=>{
                   btn.style.display = "none";
                })
            })
                
        })
    }
render() {
    return (
        <responses
            tabIndex={this.props.tabIndex}
            replies={this.props.replies}   //this is the array that contains the buttons to be rendered
            sendMessage={this.props.sendMessage}
            styles={this.props.styles}
        />
    )
}


respondContainer.propTypes = {
    replies: responsePropTypes.responses,
    sendMessage: PropTypes.func.isRequired,
    tabIndex:PropTypes.number.isRequired
};

} However, I also want that once I click a button, they should both be deleted from the document’s elements so that when the app is reloaded, these buttons are not rendered from localStorage either

I tried to do:

    componentDidMount(){
        var buttons = document.getElementsByClassName('myClass');
        buttons.forEach(btn=>{
            btn.addEventListener("click",(e)=>{
                buttons.forEach(btn=>{
                   btn.parentNode.removeChild(btn);
                })
            })
 
        })
    }

But the above case only makes the button I click on disappear and both of the buttons re-appear after the page is reloaded (both of which are behaviours I’m trying to avoid)

I’m stuck on how to implement this now

2

First off i’m curious why you are using an addEventListener?
In React you usually just add an onClick function to a <button> element.

You also need to create some state for your button so you can have something like… onclick => display:none = true.

Simiar to this example(from the react docs)

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback   
     this.handleClick = this.handleClick.bind(this);  }

  handleClick() {  
      this.setState(state => ({      
           isToggleOn: !state.isToggleOn   
        }));  }
  render() {
    return (
      <button onClick={this.handleClick}>       
          {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

This way you can setState for displaying your buttons and persist it in local storage…

3

Hello, thanks for your reply! I used addEventListener because an answer I found online also made use of it. I’m still a little confused as to how to incorporate your answer for my container? I’ve commented the part which generates the buttons as well.

5

Can you post the code showing the responses component (the jsx code for <button> </button>)

6 
export default class responses extends React.PureComponent {
    returnResponses() {
        return this.props.replies.map((reply, index) => {
            return (
                <Reply
                    tabIndex={this.props.tabIndex}
                    key={index}
                    text={reply}
                    onClick={() => this.props.sendMessage(reply)}
                    styles={this.props.styles}
                />
            );
        })
    }

    render() {
        return (
            <div className={classnames(styles.responseWrapper)}>
                {this.returnResponses()}
            </div>
        )
    }
}

responses.propTypes = {
    replies: responsePropTypes.Responses,
    sendMessage: PropTypes.func.isRequired,
    styles: responseStylePropTypes.Responses,
    tabIndex: PropTypes.number.isRequired
};
7

Do you have this in github? To help you with this it would be helpful if I could read through the code and see how everything works together…

8

I don’t think I’ll be able to share the github sorry! Its a lot of components though so I understand that its hard to help. Is there any way we could just use this platform? I understand if its not possible though. This is the only class reponsible for rendering the buttons though

9

Hello @hola_world
I am wondering whether you are using react router. If you are not, then it is logical that navigating back to a “page” renders the component again hence losing the state in which it was initially. I have also noticed certain things in your code which are not reactish.

  1. You are not naming components correctly. In react, component names must be capitalized like RespondContainer not respondContainer.
  2. Just like @emma-r-slight pointed out, I don’t think you really need to use vanilla JS method for selecting your DOM elements. There are certain APIs built in react which can do that for you.
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.