Render div with state only on phones

is there some way how to render div conditionally with state but only for mobiles? I have show more button, but i need it only for phone resolution, also I need to display that div with className text every time on desktop

const ListItem = ({ text }) => {
    let [showMore, setShowMore] = useState(false);

    return (
        <div className="item">
            <div>
                <div className={`text ${showMore ? "active" : ""}`}>{text}</div>
            </div>
            <button onClick={() => setShowMore((s) => !s)}>Show more</button>
        </div>
    );
};

Answer

you can set the active class in the media query.

At first, you can this div display none. when your resolution is phone then you set display block.

.active{
        display: none;
    }

    @media screen and(max-widht: '400px') {
       .active{
            display: block;
       }
    }