Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
In many scenarios you want to display a completely different component inside a screen, when a button or link is clicked.
Think about a navigation structure, for example.
How can you do so?
In this example I’m managing the state centralized 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, handle the addTrip event by assigning it the triggerAddTripState
method:
<AddTripButton addTrip={this.triggerAddTripState} />
With React hooks, first import useState:
import { useState } from 'react'
then declare a “state” variable:
const [state, setState] = useState('start')
In the JSX you show and hide different components based on this state value:
function App() {
const [state, setState] = useState('start')
triggerAddTripState = () => {
setState('add-trip')
}
return (
<div>
{state === 'start' && (
<AddTripButton addTrip={this.triggerAddTripState} />
)}
{state === 'add-trip' && <AnotherComponent />}
</div>
)
}
With class-based components, in triggerAddTripState
you edit the state 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 contains isEmptyState: true
. When the triggerAddTripState
method is run, the state is edited so that property is set to false, and a new isAddTripState
property is set to true.
Now in the JSX we can use those 2 state properties to show and hide parts of the component by using this syntax:
render() {
return (
<div>
{this.state.isEmptyState && <AddTripButton addTrip={this.triggerAddTripState} />}
{this.state.isAddTripState && <AnotherComponent />}
</div>
)
}
Download my free React Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More react tutorials:
- A React simple app example: fetch GitHub users information via API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to a child component via React Router
- Create an app with Electron and React
- Tutorial: create a Spreadsheet using React
- The roadmap to learn React
- Learn how to use Redux
- Getting started with JSX
- Styled Components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- React Components
- The Virtual DOM
- React Events
- The React State
- React Props
- The React Fragment
- The React Context API
- React PropTypes
- React concepts: declarative
- React: How to show a different component on click
- How to loop inside React JSX
- Props vs State in React
- Should you use jQuery or React?
- How much JavaScript you need to know to use React?
- Introduction to Gatsby
- How to reference a DOM element in React
- Unidirectional Data Flow in React
- React Higher Order Components
- React Lifecycle Events
- React Concept: Immutability
- React Concept: Purity
- Introduction to React Hooks
- Introduction to create-react-app
- React Concept: Composition
- React: Presentational vs Container Components
- Code Splitting in React
- Server Side Rendering with React
- How to install React
- CSS in React
- Using SASS in React
- Handling Forms in React
- React StrictMode
- React Portals
- React Render Props
- Testing React components
- How to pass a parameter to event handlers in React
- How to handle errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- React, how to transfer props to child components
- How to get the value of an input element in React
- How to use the useState React hook
- How to use the useCallback React hook
- How to use the useEffect React hook
- How to use the useMemo React hook
- How to use the useRef React hook
- How to use the useContext React hook
- How to use the useReducer React hook
- How to connect your React app to a backend on the same origin
- The Reach Router Tutorial
- How to use the React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix the `dangerouslySetInnerHTML` did not match error in React
- How I fixed an issue with a React login form state and Browser autofill
- How to configure HTTPS in a React app on localhost
- How to fix the "cannot update a component while rendering a different component" error in React
- Can I use React hooks inside a conditional?
- Using useState with an object: how to update
- How to move around blocks of code with React and Tailwind
- React, focus an item in React when added to the DOM
- React, edit text on doubleclick
- React Router, how to get data from a dynamic route
- React Router, why useLocation and useHistory might return undefined