How to Dynamically Show or Hide Elements in React Using State?

How to Show or Hide an Element in React

The Problem

Beginners often face difficulties in displaying or concealing elements in React using click events. This guide provides a native React solution, eliminating the need for external libraries.

Example Code

Consider the following React code:

<code class="js">var Search = React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div classname="date-range">
                <input type="submit" value="Search" onclick="{this.handleClick}">
            </div>
        );
    },
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" classname="search-results">
                Some Results
            </div>
        );
    },
});

React.renderComponent(<search></search>, document.body);</code>

Solution

Using the latest React features, the solution involves:

React State Management

Leverage React's state hooks to handle the toggle between showing and hiding the element. State management determines whether the element should be rendered or not.

Component Code

<code class="js">const Search = () => {
  // Initialize state to hide results
  const [showResults, setShowResults] = React.useState(false);

  // Toggle results visibility on click
  const onClick = () => setShowResults(true);

  return (
    <div>
      <input type="submit" value="Search" onclick="{onClick}">
      { showResults ? <results></results> : null }
    </div>
  );
};

const Results = () => (
  <div id="results" classname="search-results">
    Some Results
  </div>
);

// Render the component
ReactDOM.render(<search></search>, document.getElementById('container'));</code>

Key Takeaways

• State management allows dynamic rendering based on user interaction.
• By updating the state, React efficiently re-renders the affected components.
• This solution is a versatile approach that can be applied to various scenarios requiring element visibility control in React.

The above is the detailed content of How to Dynamically Show or Hide Elements in React Using State?. For more information, please follow other related articles on the PHP Chinese website!