Visual Studio Code IDE is my personal preference when working with, specifically, the front-end of an application. You are free to use another editor of your own choice. The create react app package let’s quickly scaffold the structure of a starting point. It sets up things that would otherwise involve efforts and divert us from the task at hand. <\/p>\n
Let us create a skeletal ReactJS application using create-react-app. We achieve the same using the following command:<\/p>\n
> npx create-react-app my-app .<\/pre>\nThe
npx<\/code> command downloads the create-react-app package and runs it using the arguments provided. Once done it disposes of the package. This prevents polluting our global namespace with rarely used packages. The newly created project has a structure similar to the following screenshot.<\/p>\n\nProject Structure<\/figcaption><\/figure>\n<\/div>\n There are two ways to go about achieving our aim in this article. One is to not render the component itself and the other is to hide it using CSS. Let us look at both approaches one at a time.
<\/div> <\/div><\/p>\n1. Conditional Rendering<\/h2>\n
In this approach, we apply logic in the render method of the component to conditionally render or not the component in question. Let us say we create a component that displays a greeting message to the user. Additionally, we render a checkbox which when checked displays the greeting and hides it when unchecked. To achieve this behavior we store the state of the checkbox in the state of the component. <\/p>\n
When the render method is called we use the following expression in the return value of the render method.<\/p>\n
...\nthis.state.show && <Greeting \/>;\n...\n<\/pre>\nThis expression returns the second value if the first value is true and false otherwise. Used in the render method this ensures that the component is not rendered when the value of the show state variable is false. The implementation code looks like below:<\/p>\n
Greeting.tsx<\/em><\/span><\/p>\n
import React from 'react';\ntype myprops = {};\ntype mystate = { greeting: string, show: boolean};\nclass Greeting extends React.Component {\n constructor(props: any) {\n super(props);\n this.state = {\n greeting: 'Hello from JavaCodeGeeks',\n show: true\n };\n }\n render = () => {\n \n return (<div><input type=\"checkbox\" checked={this.state.show} onChange={this.onChange} \/><span>Show Greeting<\/span>\n {this.state.show && <h3>{this.state.greeting}<\/h3>}\n <\/div>);\n }\n onChange = (e: any) => {\n this.setState({show: e.target.checked});\n }\n}\nexport default Greeting;\n\n<\/pre>\nWhen we run this code using the command npm start and navigate to the URL http:\/\/localhost:3000 in the browser. We see the below output:<\/p>\n
\nProject Output<\/figcaption><\/figure>\n<\/div>\n On unchecking the checkbox the greeting text disappears completely like below:<\/p>\n
\nProject Output<\/figcaption><\/figure>\n<\/div>\n Now we take a look at the other approach I mentioned above to achieve the same functionality.<\/p>\n
2. CSS Rules<\/h2>\n
We can show\/hide a component using the CSS rule display, by setting it to none or block. To formulate an approach to show\/hide our component we create a CSS style class which when applied to the component hides it. The component is visible otherwise. Our code revolves around setting the className property on the component. The code snippet for which looks like below:<\/p>\n
<Greeting className={this.state.show ? '': 'hide'} \/>\n<\/pre>\nThis CSS hide class looks like below:<\/p>\n
.hide {\n display: none;\n}<\/pre>\nSo now we set the show property to false when the checkbox is unchecked and the hide class is applied to our component. Which hides it from view completely. The complete implementation code looks like below with both approaches included:<\/p>\n
Greeting.tsx<\/em><\/span><\/p>\n
import React from 'react';\ntype myprops = {};\ntype mystate = { greeting: string, show: boolean};\nclass Greeting extends React.Component {\n constructor(props: any) {\n super(props);\n this.state = {\n greeting: 'Hello from JavaCodeGeeks',\n show: true\n };\n }\n render = () => {\n return (<div><input type=\"checkbox\" checked={this.state.show} onChange={this.onChange} \/><span>Show Greeting<\/span>\n {this.state.show && <h3>{this.state.greeting}<\/h3>}\n <h3 className={this.state.show ? '':'hide'}>{this.state.greeting}<\/h3>\n <\/div>);\n }\n onChange = (e: any) => {\n this.setState({show: e.target.checked});\n }\n}\nexport default Greeting;\n\n<\/pre>\nNow when we run the code and navigate to it in the browser we see the below output.<\/p>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/08\/ProjectOutputReactJSHideComponent.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/08\/Project-Output.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/08\/ProjectOutput-1.jpg\")
![\"\"](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/08\/ProjectOutput-3.jpg\")