Answer the question
In order to leave comments, you need to log in
How to change the style of all elements of a class in React?
There are many product cards. By pressing the button, the grid should be compacted so that more elements are displayed, and for this I want to change the size of the cards on click. Tried this option:
function clickSmaller() {
const element = document.getElementsByClassName('product-card');
element.style.width = "250px";
element.style.height= "300px";
function clickSmaller() {
const productCards = document.getElementsByClassName('product-card');
productCards.classList.add('smallCard')
}
Answer the question
In order to leave comments, you need to log in
Avoid using direct access to DOM elements in React development and use component state.
const Grid extends React.Component {
state = { itemsSize: 'sm' };
handleChangeSize = () => { /* some code */ };
render() {
const { itemSize } = this.state;
const { items } = this.props;
return (
<Wrapper>
<ControlPanel onChangeSize={this.handleChangeSize} />
{items.map(item => <Item key={item.id} size={this.state.itemSize} />)}
</Wrapper>
);
}
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question