How to Toggle Element Visibility in React Using State Management?

Displaying and Hiding Elements in React

React provides several approaches to control the visibility of elements dynamically based on specific events or conditions. Let's explore one of these techniques.

In your code snippet, you aim to show or hide the Results component when the Search component's button is clicked. To achieve this, we can leverage the state management capabilities provided by React.

Using React Hooks (for React versions 16.8 )

With React hooks, you can manage component state more effectively. In your Search component, define a state variable called showResults and set its initial value to false. Then, in the handleClick function, use the setShowResults setter to update the state to true, triggering a re-render.

<code class="javascript">import React, { useState } from 'react';

const Search = () => {
  const [showResults, setShowResults] = useState(false);

  const handleClick = () => {
    setShowResults(true);
  };

  return (
    <div className="date-range">
      <input type="submit" value="Search" onClick={handleClick} />
    </div>
  );
};</code>

In the Results component, you can use conditional rendering to display the results only when showResults is true.

<code class="javascript">const Results = () => {
  return (
    <div id="results" className="search-results">
      Some Results
    </div>
  );
};</code>

In your render method, you conditionally render the Results component based on the value of showResults.

<code class="javascript">render() {
  return (
    <div>
      <Search />
      {showResults && <Results />}
    </div>
  );
}</code>

The above is the detailed content of How to Toggle Element Visibility in React Using State Management?. For more information, please follow other related articles on the PHP Chinese website!