Estoy creando un div que tiene 2 div adentro. El primer div proviene de una función llamada borderDiv() que devuelve un div que proporciona algunas clases según los argumentos.

 allData.map(data => { const isTwoRows = data.textToRender.length <= 50 && data.textToRender.length > 30; const isThreeRows = data.textToRender.length > 50; return (<div className="parent-border"> {borderDiv(isTwoRows, isThreeRows)} <div> {data.textToRender} </div>< /div>); })

Cuando recibe isTwoRows el primer div dentro tiene clases que asignan una height de 20px. Cuando reciba isThreeRows la altura será de 40px.

Funciona bien al dar clases, por lo que la función borderDiv() funciona bien, pero mi problema es establecer correctamente el valor para 2 o 3 filas.

En este momento solo estoy contando caracteres de la cadena dada. Si es superior a 50, diré que es isThreeRows o si es ]30, 50] será isTwoRows .

Quiero preguntar cómo podría establecer de manera correcta la cantidad de filas de texto que tiene el div padre (el div con clase parent-border ). O, en otras palabras, obtenga la altura que representó el div principal de borderDiv . Al obtener esa altura, podría dar como argumento a borderDiv() y luego elegir la clase correcta.

Intenté simplemente configurar algo como:

 // in css: .border-div { height: inherit; } <div className="parent-border"> <div className="border-div"> // This will be the div rendered <div>{data.textToRender}</div> <(div>

Espera heredar la altura dinámica de "borde principal", pero esta clase no tiene una altura específica, ya que puede cambiar según el registro del texto representado. Ejemplo de textos renderizados:

 "a short text" <-- 1 row, so border-div height will be 20px "a longer text that needs to me adapted" <--- 2 rows, so border div should be 40px

Cualquier pista por favor.