Toggling…FOR YOUR LIFE…kidding, just for a React component!
No, not ogling, toggling! Within a React component, we can allow for our users to view, or hide, components on a ‘page’ by pressing a button. This action, toggling, can help keep our container views neat and not over-burdened with all of our components showing all at once.
We will start off working in our main container, or the parent component. This toggling function will need to have access to a local state prop, so it’s important that this container/parent component is a class component. If we can imagine, we will need to have 4 elements of this class component to successfully toggle another component:
- state = {} with a 1 specific prop that relies on this component being on view or not. Name the key accordingly, and the value we will set as false.
- A render function returning a <button> element. A user clicking this button fires off the buttons synthetic event of onClick
- onClick calls to the function that will change the state of our specific property, using this.setState and previousState
- JSX logic in our return that conditionally renders our child component based on the state of our specific prop
Let’s get started! My example is based upon a parent container showing a child component (a form) that will create a new job posting. There’s no reason to have this form showing all the time, and if it did, it would just clutter the page and the other components of the container would end up too far down the page.
- state = {} with a 1 specific prop that relies on this component being on view or not. Name the key accordingly, and the value we will set as false:
First, we will declare local state and set it up with a prop for viewing the form, setting the value to false initially. This prop can be named however best suits your program so that you know what this changing the state of this prop actually does.
2. A render function returning a <button> element. A user clicking this button fires off the buttons synthetic event of onClick
Next, we will set up the render method of our component and return a div with a button element. Clicking this button will make a call to a function in our component outside of render, but still within our class. You can hard-code the text of this button, but here we wrap the word ‘text’ in curly brackets. At the end of this blog I’ll give a little bonus code what will also toggle the button text onClick.
3. onClick calls to the function that will change the state of our specific property, using this.setState and previousState
Upon our user clicking the button, the synthetic event of onClick calls to our onClickHandler function (here called viewAddJobForm). The sole responsibility of this function is to change the state of our prop. Because we never want to change set directly (this.state — NEVER) React gives us the this.setState function to alter state. Because of the way Javascript batches, and how, accordingly we want to change the most up to date version of state possible, we pass previousState(or prevState) as an argument to this.setState to change the value of the prop viewJobForm conditionally using a ternary operator. if the value is true…change it to false, and vice versa.
4. JSX logic in our return that conditionally renders our child component based on the state of our specific prop
Before we code this next section, don’t forget to import the child component at the top of the file and because we can only return 1 JSX element, you’ll either need to wrap the div of the button in a parent <div> or with React Fragments: <React.Fragment> or <> for short.
This next div will house the jsx logic that will conditionally render the <JobForm> component, again, using a ternary operator. If the button has been clicked and this.state.viewJobForm === true, then show the component. If false, show nothing.
These 4 elements will get you toggling React components in no time.
Bonus: to change the text on the button, you can also use the conditional state of the viewJobForm prop. By setting a variable ‘text’ and, again, using a ternary op, you can toggle this text with every click, too!
