I am having difficulty with using React.createRef() to get the height of an element in a child component.
The difficulty is only in the first of three child components created with a map.
The child component displays like an actual ticket (see below).
The left hand side and the right hand side are different divs.
The (red) background color to the ticket title ('early bird' etc) will have a larger height if the user submits a ticket with a long name that takes up more space than is available in one line.
I want the height of the red div on the right hand side of the ticket to match the height of the h1 containing the ticket title on the left hand side.
I am using React.createRef() to find the height of the h1 and apply it through inline style to the div on the right hand side.
This works for the second and third tickets but won't work for the first ticket.
//Parent Component
{this.state.userEvent.tickets
.map((e, i) => {
return (
<div key={i}>
<ColmTicket
ticketType={e.ticketType}
description={e.ticketDescription}
price={e.price}
refunds={e.refunds}
chargeForNoShows={e.chargeForNoShows}
hold={e.hold}
quantity={e.buy.numTicketsSought}
changeQuantity={this.changeQuantity}
i={i}
/>
</div>
);
})}
//Child Component
class ColmTicket extends React.Component {
constructor(props) {
super(props);
this.state = {
height: 0,
};
this.containerRef = React.createRef();
}
componentDidMount() {
const { offsetHeight } = this.containerRef.current;
this.setState({
height: offsetHeight,
});
}
render() {
return (
<div>
<h1 ref={this.containerRef}>
{this.props.ticketType}
</h1>
<div className="event-eye" style={{ height: this.state.height }}></div>
</div>
);
}
}
I am also running console.logs in componentDidMount. The first ticket - the one with the problem - does not display the prop that gives the name of the ticket when it is console logged (line 17 below). The other two tickets do provide this prop when it is console.logged.
This leads to believe that, for the first component, the prop has not been rendered when componentDidMount is called? Is this possible and, if so, can I fix it?
// Console Log results
ColmTicket.js:17
ColmTicket.js:18 this.containerRef {current: h1.event-ticket-title}
ColmTicket.js:19 this.containerRef.current <h1 class="event-ticket-title">…</h1>
ColmTicket.js:22 offsetHeight 20
ColmTicket.js:23 ---------
ColmTicket.js:17 General Admission
ColmTicket.js:18 this.containerRef {current: h1.event-ticket-title}
ColmTicket.js:19 this.containerRef.current <h1 class="event-ticket-title">…</h1>
ColmTicket.js:22 offsetHeight 48
ColmTicket.js:23 ---------
ColmTicket.js:17 Skip The Queue
ColmTicket.js:18 this.containerRef {current: h1.event-ticket-title}
ColmTicket.js:19 this.containerRef.current <h1 class="event-ticket-title">…</h1>
ColmTicket.js:22 offsetHeight 48
ColmTicket.js:23
