How to create a Read More component in ReactJS?

// Filename - App.js

import Content from "./components/ReadMore";
import "../App.css";


function App() {
    return (
        <div className="App">
            <h1 className="geeks">GeeksforGeeks</h1>
            <h3>
                React example to Create Read More Component
            </h3>
            <Content />
        </div>
    );
}

export default App;

// Filename - components/ReadMore.js

import React, { useState } from "react";

const ReadMore = ({ children }) => {
    const text = children;
    const [isReadMore, setIsReadMore] = useState(true);
    const toggleReadMore = () => {
        setIsReadMore(!isReadMore);
    };
    return (
        <p className="text">
            {isReadMore ? text.slice(0, 100) : text}
            <span
                onClick={toggleReadMore}
                className="read-or-hide"
                style={{ color: "green" }}
            >
                {isReadMore ? "...read more" : " show less"}
            </span>
        </p>
    );
};

const Content = () => {
    return (
        <div className="container">
            {/* <h2> */}
                <ReadMore>
                    GeeksforGeeks: A Computer Science portal
                    for geeks. It contains well written,
                    well thought and well explained computer
                    science, programming articles and
                    quizzes. It provides a variety of
                    services for you to learn, so thrive and
                    also have fun! Free Tutorials, Millions
                    of Articles, Live, Online and Classroom
                    Courses ,Frequent Coding Competitions,
                    Webinars by Industry Experts, Internship
                    opportunities, and Job Opportunities.
                    Knowledge is power!
                </ReadMore>
            {/* </h2> */}
        </div>
    );
};

export default Content;