Scribd
Upload
4 views1 page

React Toggle Visibility Component

The document is a React functional component that uses the useState hook to manage the visibility of some content. It includes a button that toggles the display of either a message or a 'data is hidden' message based on the state. The component demonstrates basic conditional rendering in React.

Uploaded by

KundiLokesh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views1 page

React Toggle Visibility Component

The document is a React functional component that uses the useState hook to manage the visibility of some content. It includes a button that toggles the display of either a message or a 'data is hidden' message based on the state. The component demonstrates basic conditional rendering in React.

Uploaded by

KundiLokesh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import React, { useState } from "react";

const Index = () => {


const [showData, setShowData] = useState(false);

const handleChange = () => {


setShowData(!showData);
};

return (
<div>
<button onClick={handleChange}>{showData ? "hide" : "show"}</button>
{/* {showData && (
<div className="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum,
cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
quaerat ipsum rem vitae soluta autem porro ex enim veritatis?
Asperiores?
</div>
)} */}
{showData ? (
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quia
quisquam, ullam cupiditate asperiores commodi dolorum. Tempora, ab.
Molestiae libero quidem ex, dignissimos possimus assumenda itaque
reiciendis quos voluptate magnam.
</div>
) : (
<h3>data is hidden</h3>
)}
</div>
);
};

export default Index;

You might also like