¿Hay alguna forma de renderizar div condicionalmente con estado pero solo para móviles? Tengo el botón Mostrar más, pero solo lo necesito para la resolución del teléfono, también necesito mostrar ese div con el texto className cada vez en el escritorio
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> ); };puede establecer la clase activa en la consulta de medios.
Al principio, puede que este div no muestre ninguno. cuando su resolución es el teléfono, entonces configura el bloque de visualización.
.active{ display: none; } @media screen and(max-widht: '400px') { .active{ display: block; } }Puede usar CSS puro o usar un gancho para consultas de medios como el siguiente:
import {useMediaQuery, useMediaQueries} from '@react-hook/media-query' // Using a single media query const Component = () => { const matches = useMediaQuery('only screen and (min-width: 400px)') return `Matches? ${matches ? 'Matched!' : 'Nope :(')}` } // Using multiple media queries const Component = () => { const {matches, matchesAny, matchesAll} = useMediaQueries({ screen: 'screen', width: '(min-width: 400px)' }) return ( <div> Screen matched? {matches.screen ? 'Yes' : 'No'} Width matched? {matches.width ? 'Yes' : 'No'} All matched? {matchesAll ? 'Yes' : 'No'} Any matched? {matchesAny ? 'Yes' : 'No'} </div> ) } import {useMediaQuery, useMediaQueries} from '@react-hook/media-query' // Using multiple media queries const Component = () => { const {matches, matchesAny, matchesAll} = useMediaQueries({ screen: 'screen', width: '(max-width: 767px)' }) return ( {matches.screen ? (<div>Display on mobile</div>) : ''} ) }Tenga en cuenta que esta solución depende de este complemento