I have a React Component where on ponentDidMount()' I want to set themin-heightproperty of an element whereclassName="content-wrapper"` to '600px'.

I have tried the following:

ponentDidMount() {
    document.getElementsByClassName('content-wrapper').style.minHeight = "600px"
}

Unfortunately that results in the following error:

Uncaught TypeError: Cannot set property 'minHeight' of undefined

at MyComponentponentDidMount

I'm still getting the hang of React and would appreciate any help possible in achieving this goal. Thanks!

I have a React Component where on ponentDidMount()' I want to set themin-heightproperty of an element whereclassName="content-wrapper"` to '600px'.

I have tried the following:

ponentDidMount() {
    document.getElementsByClassName('content-wrapper').style.minHeight = "600px"
}

Unfortunately that results in the following error:

Uncaught TypeError: Cannot set property 'minHeight' of undefined

at MyComponent.ponentDidMount

I'm still getting the hang of React and would appreciate any help possible in achieving this goal. Thanks!

• javascript
• css
• reactjs

• Is content-wrapper an element that you have created in a react ponent or just using standard html or js? – Martin Dawson Commented Dec 25, 2016 at 21:23
• It was just a div tag – Barry Michael Doyle Commented Dec 25, 2016 at 21:28
• Well, if you created this div tag in a react ponent then it will be a virtual div. In this case the accepted answer isn't what you want because you are directly modifying the DOM which isn't good. If it's a div in a normal html file or created using normal JS then it's fine. – Martin Dawson Commented Dec 25, 2016 at 21:30
• What do you remend? The accepted answer solved my problem. – Barry Michael Doyle Commented Dec 25, 2016 at 21:42

3 Answers 3

You haven't posted how you created content-wrapper still.

If you did something like this:

class Component extends React.Component {
    render() {
        return <div className="content-wrapper"/>
    }
}

Then modifying the DOM directly goes against React (even though it may work) because React uses a virtual DOM to see what has changed since last render. Therefore if you modify the DOM directly, React will overwrite these changes because it's looking at the previous virtual DOM and thinks nothing changed.

Instead you will want:

class Component extends React.Component {
   ponentDidMount() {
       this.setState({conentWrapperMinHeight: "600px"})
   }
   render() {
       return <div className="content-wrapper" style={{minHeight: this.state.conentWrapperMinHeight}} />
 }
}

You could just hardcode 600px in if you do it for 1 div only or you could dynamically add a class to content-wrapper and set minHeight in css to 600px.

If you have multi content-wrapper div's that you want to change in multiple ponents then you will need to lift the state up to a higher ponent and pass it down as props or use Redux or Flux if they are pletely unrelated.

Get elements, iterate and set style.

ponentDidMount() {
    document.querySelectorAll('.content-wrapper').forEach(el => el.style.minHeight = '600px');
}

You may also manipulate the DOM node directly using ReactDOM. Using TypeScript (but applicable to JS as well of course):

private setMinHeight = () => {
    const thisNode = ReactDOM.findDOMNode(this) as HTMLElement;
    if (thisNode) {
        thisNode.style.minHeight = (...);
    }
}

This function may be called in ponentDidMount(), and, if you want it to update min-height every time the ponent is re-rendered, in ponentDidUpdate() as well.