Toggle the visibility of a component by telling React to show another component when you click on something
In many cases, when you click a button or link, you want to display completely different components on the screen.
For example, consider the navigation structure.
How can you do this?
In this example, I manage the state concentrated in the App component.
import React from 'react'
const AddTripButton = (props) => {
return <button onClick={props.addTrip}>Add a trip</button>
}
export default AddTripButton
Then, in the App component, by assigning the addTrip event totriggerAddTripState
method:
<AddTripButton addTrip={this.triggerAddTripState} />
To use React hooks, first import useState:
import { useState } from 'react'
Then declare a "state" variable:
const [state, setState] = useState('start')
In JSX, you can show and hide different components based on the following status values:
function App() {
const [state, setState] = useState('start')
triggerAddTripState = () => {
setState(‘add-trip’)
}
return (
<div>
{state === ‘start’ && (
<AddTripButton addTrip={this.triggerAddTripState} />
)}
{<span style="color:#a6e22e">state</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">'add-trip'</span> <span style="color:#f92672">&&</span> <span style="color:#f92672"><</span><span style="color:#a6e22e">AnotherComponent</span> <span style="color:#f92672">/></span>}
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></span>
)
}
With class-based components,triggerAddTripState
You edit the status of the component:
class App extends Component {
constructor(props) {
super(props)
this.state = { isEmptyState: true }
}
triggerAddTripState = () => {
this.setState({
…this.state,
isEmptyState: false,
isAddTripState: true
})
}
}
See, here I create a default state, which containsisEmptyState: true
. when. . . whentriggerAddTripState
Run the method, edit the state so that the property is set to false, and then create a new oneisAddTripState
The property is set to true.
Now, in JSX, we can use the following 2 state attributes to show and hide certain parts of the component through the following syntax:
render() {
return (
<div>
{this.state.isEmptyState && <AddTripButton addTrip={this.triggerAddTripState} />}
{<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">state</span>.<span style="color:#a6e22e">isAddTripState</span> <span style="color:#f92672">&&</span> <span style="color:#f92672"><</span><span style="color:#a6e22e">AnotherComponent</span> <span style="color:#f92672">/></span>}
<span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/div></span>
)
}
Download mine for freeResponse Handbook
More response tutorials:
- A simple React application example: Get GitHub user information through API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to child components through React Router
- Create an application using Electron and React
- Tutorial: Create a spreadsheet with React
- Roadmap for learning React
- Learn how to use Redux
- Getting started with JSX
- Stylized components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- Reaction component
- Virtual DOM
- Reaction event
- Reaction state
- Reaction props
- Reaction fragment
- React Context API
- Reaction PropTypes
- Reaction Concept: Declarative
- React: How to display other components when clicked
- How to loop inside React JSX
- Props and status in React
- Should you use jQuery or React?
- How much JavaScript do I need to know to use React?
- Gatsby Introduction
- How to reference DOM elements in React
- One-way data flow in React
- React high-end components
- React to life cycle events
- Reaction concept: immutability
- Reaction concept: purity
- Introduction to React hooks
- Introduction to create-react-app
- Reaction concept: composition
- React: demo component and container component
- Code splitting in React
- Server-side rendering with React
- How to install React
- CSS in React
- Use SASS in React
- Processing forms in React
- Reaction strict mode
- Reaction portal
- React rendering props
- Test React components
- How to pass parameters to event handlers in React
- How to deal with errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- Reaction, how to transfer props to subcomponents
- How to get the value of an input element in React
- How to use useState React hook
- How to use useCallback React hook
- How to use useEffect React hook
- How to use useMemo React hook
- How to use useRef React hook
- How to use useContext React hook
- How to use useReducer React hook
- How to connect your React app to the backend of the same source
- Reaching the router tutorial
- How to use React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix `dangerouslySetInnerHTML` does not match the error in React
- How can I solve the problem of React login form status and browser auto-fill
- How to configure HTTPS in React application on localhost
- How to fix the "Component cannot be updated while rendering other components" error in React
- Can I use React hooks within the conditions?
- Using useState with objects: how to update
- How to move in code blocks using React and Tailwind
- React, focus on an item in React when added to the DOM
- Response, edit text on doubleclick