score:2
Accepted answer
use react usestate hook and let react handle the manipulation of the dom.
const [shouldshowsearch, setshouldshowsearch] = usestate(false);
const toggleshowsearch = () => setshouldshowsearch(prev => !prev);
const label = shouldshowsearch ? 'hide' : 'show';
const top = shouldshowsearch ? '70px' : '0';
//... code
<>
<form id="hearder_search_bar" action="#" classname="header__search" style={{top}}>
// ... code
<button
type="button"
classname={label}
onclick={toggleshowsearch}
>
</form>
// .. code
<button onclick={toggleshowsearch}>{label} search</button>
score:0
you can use conditionnal classname
classname={headerishidden ? 'header__search__hidden' : 'header__search__shown'
Source: stackoverflow.com
Related Query
- How can I change styles in the onClick event?
- How can I change background colors to the react element upon onclick event
- How can I change the styles of the react-toastify popup message?
- How can I handle the change event with React-Hook-Form?
- How can I change the checkbox styles and icons when hover on it in Material-UI React?
- How can I change the onClick function of a button saved in a useRef object in a react component?
- how i can change background color of full page using onclick event in reactjs?
- How can I have an onclick event in the DataGrid for any Column | React
- How Do I Change the Style of an Element in a Component When an onClick Event for an Element in a Different Component Occurs?
- how can we change the sass styling of div Y onclick of a button present in divX in react.js?
- How can I animate a react.js component onclick and detect the end of the animation
- How do I trigger the change event on a react-select component with react-testing-library?
- material UI - How can I change the font size of the label in FormControlLabel
- How can i change the cell colour in ANTD table according to the value?
- How can I change the color of a Link in React with Material-UI?
- How to call multiple functions on the same onClick event ReactJS
- (Next.js) How can I change the color of SVG in next/image?
- How can I change the format for react datepicker days of the week?
- How can I change the width of Material UI Autocomplete popover
- how can I react-bootstrap change the color of the tabs
- How can I change icon in the KeyboardTimePicker (material-ui-pickers)?
- How can I change the label size of a material ui TextField?
- How to change the styles of ListItem element with the "onclick" event?
- NextJS Router & Jest: How can I mock router change event
- How can I setup a local environment to work with the latest SameSite cookie change to Chrome?
- ReactJS: How can I play an html5 video with an onClick event correctly with react?
- How can I dynamically change the value of a CSS property in React?
- How can I contain the styles of a Chrome Extension content script?
- How can I change the color of material-table icons of onRowAdd, onRowUpdate, onRowDelete?
- How can I change the default port in react from 3000 to another port?
More Query from same tag
- How can I export a React Component as an NPM package to use in separate projects?
- How to change the color of the calendar icon of the TextField date-picker? In Material-UI React
- Extending a React Styled Component
- how do not render component particular part in reactjs
- React webpack error Runtime loading of image
- react router Link doesn't cause rerender when visited on the same path
- Cannot read property 'getRequest' of undefined - Relay
- How to avoid repeated executions of the same event?
- How can I embed VaniilaJS into React?
- Conditional image src render react
- How to resolve useMemo output
- useState not update variable
- How to add mask in antd datepicker reactjs
- how to export React component from a typescript file
- This is driving me crazy - Line 42:40: 'firebase' is not defined no-undef
- Next.js Example Auth - re-routing based on auth, wrapping around other functions
- Does NX need to be installed globally by people who only want to run the app / e2e tests?
- Search Inside Dropdown with data in tree structure React JS
- React js and chart js pie chart type
- Storing "global" object outside of Redux store in React/Redux app
- React Firebase read element
- How to use multiple types with required props on the same declaration?
- Getting typescript error when using fetchSignInMethodsForEmail method from firebase
- How can I compare values of sets in js
- React Konva draw half circumference without diameter
- React/Redux unable to set a state from a component
- How to change the input width inside a grid?
- How to setup local environment to run on https
- Using React portals to show a modal component(?) when a table row is clicked
- Add buttons of the navigation of the rc-slider - react