React Js Show More/Less Text Button

<!DOCTYPE html>
<html>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState, useEffect } = React;

const App = () => {
            const paragraph = 'A "Show more" or "Show less" text button in React.js is a user interface feature that allows users to toggle the visibility of long or truncated text content. When the "Show more" button is clicked, the hidden content is revealed, allowing users to see the full text. Conversely, when the "Show less" button is clicked, the content is collapsed or truncated again. This functionality is typically implemented by managing a state variable in React.js that controls the visibility of the text, and updating it accordingly when the buttons are clicked, triggering a re-render of the component.';

const [displayedText, setDisplayedText] = useState('');
            const [isCollapsed, setIsCollapsed] = useState(false);

useEffect(() => {
                collapseText(200);
            }, []);

const collapseText = (textSize) => {
                setDisplayedText(paragraph.slice(0, textSize));
                setIsCollapsed(!isCollapsed);
            };

const expandText = () => {
                setDisplayedText(paragraph);
                setIsCollapsed(!isCollapsed);
            };

return (
                <div className="container">
                    <h3>React Js Show more or show less text button </h3>

<p>{displayedText}</p>
                    <p className="text-btn" onClick={expandText} style={{ display: isCollapsed ? 'block' : 'none' }}>
                        Show more
                    </p>
                    <p className="text-btn" onClick={() => collapseText(200)} style={{ display: isCollapsed ? 'none' : 'block' }}>
                        Show less
                    </p>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById('app'));
    </script>
    <style>
        .container {
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            width: 600px;
            margin: 0 auto;
            padding: 50px;
        }

h3 {
            font-size: 24px;
            margin-bottom: 20px;
        }

p {
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 10px;
        }

.text-btn {
            cursor: pointer;
            color: #007bff;
            font-weight: bold;
            text-decoration: underline;
            float: right;
        }

.text-btn:hover {
            color: #0056b3;
        }

/* Styles remain unchanged */
    </style>
</body>

</html>