Back ArrowExplore all kits

React component self close on button click

share link

by vsasikalabe dot icon Updated: Feb 20, 2023

technology logo
technology logo

Solution Kit Solution Kit  

All tags must be closed. It can be done either with the self-closing format or with a corresponding closing tag ( ). Note that every React component can be self-closing, and Components are reusable bits of code or independent. They serve the exact purpose as JavaScript functions and return HTML but work in isolation. In general, the Components are of two types, Class components and Function components. When the visitor clicks a button, the onClick attribute directs the browser to run a script. The onclick attribute is an Event handler. To change the state in a React class component, we are using setState(). 


We are using the useState() hook to change the state of a function component. Before mounting, the constructor is called during component creation in React. To call the super(props) method before any other statement, we must implement the React component constructor. Otherwise, these props will be undefined in the constructor, creating bugs. 

A child component can be closed after displaying some information or taking some inputs from the user. By clicking a button or a link inside it, the window can be self-closed or can be closed. Instead, the parent component should pass it a property that it uses as the onClick. The parent component changes its state in response to that click so that the child is no longer rendered: 


Here is an example of how to self-close on a button click using React Component: 

Preview of the output that you will get on running this code from your IDE.

Code:

In this solution we use the React library.

React component self close on button click

JavaScriptdotLines of Code : 39dotLicense : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries : 
const MyReactComponent = (props) => <div>

    <h1>TEST</h1>

    <button onClick={props.onClose}>Self Close</button>

</div>;

class ParentComponent extends React.Component {
  // Note: This uses the class fields proposal, currently at Stage 3 and
  // commonly transpiled in React projects
  closeChild = () => {
    this.setState({
      showChild: false
    });
  };
  constructor(...args) {
    super(...args);
    this.state = {
      showChild: true
    };
  }
  render() {
    return (
      <div>
        {this.state.showChild && <MyReactComponent onClose={this.closeChild} />}
      </div>
    );
  }
}

ReactDOM.render(
  <ParentComponent />,
  document.getElementById("root")
);
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Open the folder in IDE.
  5. Copy the code using "copy" button above and paste it in App.js file.Copy the html code and paste it in to the index.html within the body tag.(remove the earlier code from App.js).
  6. Import React and React-dom.
  7. Add export default ParentComponent to the last line of the code.
  8. Open the terminal from IDE.
  9. npm start to run the file.


I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.


I found this code snippet by searching for React component self close on button click in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. The solution is tested on Nodejs 16.14.2 version.
  3. react 18.2.0 version.


Using this solution, we are able to do React component self close on button click with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to do React component self close on button click.

Dependent Libraries

create-react-appby facebook

JavaScript doticonstar image 100082 doticonVersion:v5.0.1doticon
License: Permissive (MIT)

Set up a modern web app by running one command.

Support
    Quality
      Security
        License
          Reuse

            create-react-appby facebook

            JavaScript doticon star image 100082 doticonVersion:v5.0.1doticon License: Permissive (MIT)

            Set up a modern web app by running one command.
            Support
              Quality
                Security
                  License
                    Reuse

                      You can search for any dependent library on kandi like react.

                      Support

                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page.

                      See similar Kits and Libraries

                      Open Weaver – Develop Applications Faster with Open Source

                      kandi

                      Community and Support

                      Company

                      Follow

                      • © 2023 Open Weaver Inc.