How to compare the width of the parent element with child?

Need if the width of the child elements more than the parent to change the state

you need to use ref( )? ( how to do it for two children? )

import React from 'react';

const Component = () => {

 return (

 <div className="parent" style={{width: '200px'>

 <p className="child1">Text 1</p>

 <p className="child2">Text 2</p>
</div>

);
};

export default Component;
April 3rd 20 at 18:48
1 answer
April 3rd 20 at 18:50
Solution
TO DO: add listener for resize of window

The solution is almost the same as me,
I just thought that it is possible to use only one ref() for parent, and through it already to know the width of child elements - ashleigh commented on April 3rd 20 at 18:53
@ashleigh, you can ref to the html element returns an HTMLElement, which is applicable querySelectorAll. - fabian_Ondricka commented on April 3rd 20 at 18:56
@fabian_Ondrickahow to get them using querySelectorAll? - ashleigh commented on April 3rd 20 at 18:59
@ashleigh, node.querySelectorAll("> *") - fabian_Ondricka commented on April 3rd 20 at 19:02
@fabian_Ondricka, so
<div className="parent" ref={elWidth}>
 elWidth.node.querySelectorAll('p')
- ashleigh commented on April 3rd 20 at 19:05
@ashleigh, no - fabian_Ondricka commented on April 3rd 20 at 19:08
@fabian_Ondricka, thank you works just like I wanted, found a solution - ashleigh commented on April 3rd 20 at 19:11

Find more questions by tags JavaScriptReact