0

Sorry for the question. I am new to react. I want to get the height of each child then apply the maximum one on all of them. by the way i do it, i get always the height of the last child. on other hand i don't know exactly how to force the maximum height on all the children. i really appreciate the help.

here is my code :

for the parent component :


 export default function Parent({data, index}) {

   const [testHeight, setTestHeight] = useState([]);
   const listRef = useRef(null);

       useEffect (() => {
        setTestHeight(listRef.current.clientHeight)
     })

    const {
        objects: blocs
    } = data


   return ( 
     <>
          {blocs && Object.values(blocs).map((itemsBlocks, i) => (
                                            <ItemChild dataItem={itemsBlocks} 
                                                          ref={listRef} 
                                                          maxHeight= { testHeight}

                                            />
                                    ))}
     </>
   )
}

for the child component :

const Child = forwardRef(function Child ({dataItem, maxHeight}, ref) {

    useEffect(() => {
        console.log(ref.current.clientHeight);
      })

    const {
        description,
        title
    } = dataItem || {}

    return (
        <>
           <div className="class_child" ref={ref} >
               {maxHeight}
                <p> {title} </p>
                <p> {description} </p>
           </div>

        </>
    )
});

export default Child
aya amine
  • 3
  • 3

1 Answers1

0

You have multiple issues. First off, you are storing the height, from the parent, and, you seem to be giving the same ref to all of your children ? Each component should have their own ref.

If you want to get all height, you need to change this :

 useEffect (() => {
   setTestHeight(listRef.current.clientHeight)
 })

You are replacing the value of your testHeight unstead of adding values to the array.

You should instead, do this :

 useEffect (() => {
   setTestHeight((current ) => [...current, listRef.current.clientHeight])
 })

I advise you to look how to update hooks by using function, as in my reply, to avoid a lot of later trouble you might meet :)

But, in my opinion, it would be better to update the hook from the children, I'm not sure if you need ref for anything, since you are new to react, I would believe you do not. If you don't need it, then, pass the setTestHeight to children, update it how I showed your, and then you will get all your height, and from the parent, by seeing when your array is full, you will be able to determine your maxheight (that you should store in another hook) and then, update all your children max height

I'm also not sure why your are using forwardref though.

Elley
  • 720
  • 8
  • 16
  • Thank you so much for your return. "you are storing the height, from the parent" ===> am i not supposed to store the height in the parent . it is where i should compare the height no? Yes i know there is a problem in giving the same ref to all the children, but i don't know how to give each child his own ref. do you have any idea how to do so. Thank youuu again. – aya amine Aug 10 '22 at 16:01
  • Hey :) First of all, why do you need the ref ? Then, if you really do, I'll take a look, but at the moment, am too lazy for that haha. And, it's pretty rare that you do need them, so, if you don't, don't bother with them in the first place ^^ – Elley Aug 10 '22 at 18:18
  • But yes, get the height from the child, compare it in the parent when you got al of them OR, update from each child, like, instead of getting each height, if you only need your max, just give a hook set to 0, to child, and compare and update the value from each child. You are new to react, but are you new to coding as well ? – Elley Aug 10 '22 at 18:21
  • (I'm asking to know if I'm clear enough in my explanation, or if i'm too broad in my language, don't mean to be rude or anything) – Elley Aug 10 '22 at 18:22
  • Hey! I did what you said. i got the height from the child and compare it in the parent (this was the problem for me . i don't need to use the ref but when i searched i found that i should use it ^^ ) – aya amine Aug 11 '22 at 10:54
  • I understand ^^ , i am new to react not to coding :) can i ask if you have an idea ? my new problem is to force the maxHeight on all the children. how can i do that ? when i add the `style={{ height : `${maxHeight}px` )}}` the div of each child they all get the height of the first child :( . – aya amine Aug 11 '22 at 10:59
  • Great to know it worked ! And ok, thank for confirming that you are not new to coding as well :). You should try to see on the web console what are the node actually rendering stuff, you have got to be trying to select stuff with the console, and edit them on the fly through your browser to see what really will affect your divs or others :) I would blindly guess that you need to set your min height, more than your height though. Good luck ! Thanks for the points :) – Elley Aug 12 '22 at 15:10