Estoy creando un div usando un componente con estilo. Quiero cambiar la visibilidad del div al hacer clic en el botón,
const Category = () => { const [showCategory, setShowCategory] = useState(false) useEffect(() => { setShowCategory(false) }, []) return ( <button onClick={() => { setShowCategory(true)}}> New Category </button> <AdminInputStyle> <form> <form-group> <label>Add Category</label> <input type='text' /> </form-group> <button>Submit</button> </form> </AdminInputStyle> ) }Aquí está el componente con estilo
const AdminInputStyle = styled.div` display: ${(d) => (d.showCategory ? 'show' : 'hidden')}; `Tengo un ejemplo, pero en el caso usaremos un Botón. Al hacer clic en él se alterará la visibilidad.
Debe pasar una propiedad al componente con estilo si desea que sea visible en función de esa propiedad. En su ejemplo, no pasa un accesorio al componente con estilo en este escenario, por lo que el componente no puede detectar si debe estar visible o no.
Necesitará / puede usar la función css de la biblioteca styled-components . Esto puede ayudarlo a devolver estilos en función de las propiedades que tendrá su componente con estilo. En este ejemplo, nuestra propiedad que le pasamos al botón se llamará visible .
import React from 'react'; import PropTypes from 'prop-types'; import styled, { css } from 'styled-components/macro'; const StyledButton = styled.button` border-radius: 3px; color: white; background-color: green; cursor: pointer; width: 100px; height: 50px; ${({ visible }) => { return css` visibility: ${visible ? 'visible' : 'hidden'}; `; }} `; export default function Button({ children, visible, onClick }) { return ( <StyledButton visible={visible} onClick={onClick}> {children} </StyledButton> ); } Button.propTypes = { children: PropTypes.node, visible: PropTypes.bool, onClick: PropTypes.func, }; Puede ver que pasar el accesorio visible permitirá que el botón altere sus estilos en función de si esa propiedad es verdadera o falsa. Utilizamos una función dentro del componente que devuelve la función css y esto controlará la propiedad css de visibility .
Así es como utilizamos el botón y le pasamos accesorios desde otro componente; en este ejemplo, solo el archivo App.js:
import React, { useState } from 'react'; import './App.css'; import Button from './components/Button'; function App() { const [visible, setVisible] = useState(true); function handleClick() { setVisible(!visible); } return ( <div className="App"> <Button visible={visible} onClick={handleClick}> Click </Button> </div> ); } export default App; FYI: Para el css; no desea display: hidden; . hidden es un valor no válido para la propiedad de visualización. Querrías display: none; si no desea que el elemento esté en el DOM. visibility: hidden; agregará el elemento al DOM, pero no será visible. Puedes usar el que mejor se adapte a tu caso 👍🏿
También puede probar algo como esto, mostrar cuando necesite mostrar la categoría de agregar cuando presione agregar categoría
return ( <> <button onClick={() => { setShowCategory(true); }} > New Category </button> {showCategory && ( <AdminInputStyle> <form> <form-group> <label>Add Category</label> <input type="text" /> </form-group> <button>Submit</button> </form> </AdminInputStyle> )} </> );