How to set parent node style in React?

Question

I try to set parent node background color like this, but does not work, why?

<div
  onLoad="this.parentNode.style.background = 'yellow';"
>

Found here the inspiration: https://www.w3schools.com/jsref/prop_node_parentnode.asp

The main challange here is this: Make absolute positioned div expand parent div height

I have a parent div with position relative and a child div with position absolute, and I would set the parent height the same as the child.

This post above tells, it can be done only with Javascript, but there is no exact steps for it. Would you help? And I have React on top of it.

I thought if I can set color, I will able to set height also. Set color seemed a bit easier in first turn.

Why don't you just set the class of the parent element directly? — Andy, Oct 08 '21 at 14:38
You should add the code for the component as a [mcve], and tell us how the class of the parent changes. — Andy, Oct 08 '21 at 14:40
This is weird in a number of ways: `div`s don't load, In React setting the style directly like this is rarely a good idea, I don't think `onLoad` can take a string function in React (Or if they can, you should still avoid that if possible and use e.g. an arrow function) — DBS, Oct 08 '21 at 14:47
Thanks for your feedback. I added explanation to the question where this strange idea comes from. — János, Oct 08 '21 at 14:51

score 2 · Answer 1 · answered Oct 08 '21 at 14:43

2

Why don't you use useRef hook to get the ref of the node?

const node = useRef(null);
...
<div ref={node} onLoad={() => {
   node.current.parentNode.style.background = 'yellow';
}} />

answered Oct 08 '21 at 14:43

Code Passion

15
1

FranCarstens · Accepted Answer · 2021-10-08T16:31:53.490

1

Unless there's a really good reason to access the div directly, or as a ref, why not just use props?

Edit: I've included an example of how to use useRef to set the parent height using the child's calculated height.

import React, { useState, useEffect, useRef } from "react";

const ParentComponent = () => {
  const [height, setHeight] = useState(null)
  const node = useRef(null)

  return (
    <div
      style={{
        ...(height ? { height: `${height}px` } : {}),
        backgroundColor: 'yellow',
        position: 'relative'
      }}
    >
      <MyComponent setHeight={setHeight} node={node} />
    </div>
  )
}

const MyComponent = ({ setHeight, node }) => {
  useEffect(() => {
    const childHeight = node.current ? node.current.offsetHeight : 0

    setHeight(childHeight), [node.current]
  })

   // sample parent updates when child updates
  const [content, setContent] = useState(['child'])
  useEffect(
    () => setTimeout(() => setContent([...content, 'child']), 1000),
    [content]
  )


  return (
    <div style={{ position: 'absolute', top: 0, left: 0 }} ref={node}>
      {content.map((item, i) => (
        <div key={i}>{item + i}</div>
      ))}
    </div>
  )
}

edited Oct 08 '21 at 16:31

answered Oct 08 '21 at 14:53

FranCarstens

1,203
8
13

And how would you adjust, if I would set not color, but `MyComponent`'s height to `ParentComponent`? – János Oct 08 '21 at 15:03
You can use `useRef`, see "Code Passion"'s answer, to grab the child's height, and instead of `const [background, setBackground] = useState(null)` you should have something like `const [height, setHeight] = useState('auto')` – FranCarstens Oct 08 '21 at 15:10
Thanks, I stucked here, do you have any idea maybe? https://stackoverflow.com/questions/69498478/how-to-get-calculated-height-in-react – János Oct 08 '21 at 15:43
Updated, let me know if you have a specific question, I didn't comment in detail. – FranCarstens Oct 08 '21 at 16:17

How to set parent node style in React?

2 Answers2

Linked