react parent component not getting updated

Question

I have a parent component (functional), child component (class). The parent component is print component which uses react-to-print to show print-preview the child component. I have a scenario where I have to update the style (height) of a <textarea>. In UI I can get it work using ref to set the height, but when the print component triggers it's not taking the new style. It always takes the old style.

Parent component

const PrintCompoent = (props) => {
    // print component logic
    return (
        <ChildComponent
            // required props
        />
    );
}
export default PrintCompoent;

Child Component

class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
        this.noteTextRef = React.createRef();
        // state variables
    }

    UNSAFE_componentWillReceiveProps(props) {
      this.noteTextRef.current.style.height = "inherit";
      this.noteTextRef.current.style.height = `${this.noteTextRef.current.scrollHeight}px`;
    }

    // component logic

    render() {
        return (
            // html
            <textarea
              cols="50"
              ref={this.noteTextRef}
              className="form-control visit-notes"
              id="desc"
              name="note"
              onChange={this.handleUpdate}
              value={'some value'}
             />
        );
    }
}
export default ChildComponent;

I already tried with componentDidUpdate. Didn't work.

Edit: sample scenario

My answer would be use `componentDidUpdate` but if you’ve tried it but didn’t work, then you’ll need to setup minimal reproducible example for people to look into and debug, because the code looks alright. So there must be info missing that you didn’t post. — hackape, Nov 25 '22 at 07:18
I tried using passing a prop (expand: true) from parent component and in UNSAFE_componentWillReceiveProps I added a check for that props. I logged the scroll height of the textarea inside and outside of the condition. Outside it's coming correctly. But inside it's 0. And like I said in the post. I'am able to get results in UI (rendering the child component). But not in the print preview. I'll add a minimal reproducible example. — Rajesh Barik, Nov 25 '22 at 08:35
I have just tried your codesandbox, I've removed the styling where you have display:none, and it worked fine, printed the lorem ipsum text — Ivan Satsiuk, Nov 25 '22 at 10:24
The problem is I can't do that. In my application some props that are being passed down to Child component are only present in Parent component not in Print component. That's why it was designed like this. Everything works fine except this text area. — Rajesh Barik, Nov 25 '22 at 11:45

Oleg Brazhnichenko · Accepted Answer · 2022-11-25T12:46:21.727

2

So I take a look at your example and found few strange things.

To make your component work as expected, first of all, remove childComponent from App.js.

Then remove display: none from your print component. And after that everything works as expected.

You actually have few childComponents, one hidden and one that you actually see, and you provide ref to one that hidden.

** UPDATED **

You need to create ref in parent component and pass it down to your print component and do not render a one more child component in print component

edited Nov 25 '22 at 12:46

answered Nov 25 '22 at 11:13

Oleg Brazhnichenko

602
4
11

The problem is I can't do that. In my application some props that are being passed down to Child component are only present in Parent component not in Print component. That's why it was designed like this. Everything works fine except this text area. – Rajesh Barik Nov 25 '22 at 11:45
1

Then you need to create ref in parent component and pass it down to your print component and do not render a one more child component in print component – Oleg Brazhnichenko Nov 25 '22 at 11:47
This helped. I'm able to print with proper styles. Thank you. – Rajesh Barik Nov 25 '22 at 12:42

react parent component not getting updated

1 Answers1