React: Inline styles not being applied in child component

Question

Objective: I have a Main component and a Textarea component. I would like to dynamically size the textarea and its parent container given the scrollHeight of the textarea. Additionally, I also have a Button component, which is a child of Main, that will clear the text from the textarea, but that isn't my immediate concern. Just wanted to add some more context.

Issue: At present, the Main component reflects the correct initial and changed state values. However, the breakdown happens when I try to pass the updated parentHeight and textareaHeight values down to the child component, convert to string, and set the CSS properties within the style property.

As an aside, I've included commented code blocks to illustrate some of the other directions I've gone.

import Textarea from '../textareas/Textarea';
import Buttons from '../button-group/Buttons';

export default class Main extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            textareaIsEmpty: true,
            textareaHeight: 'auto',
            parentHeight: 'auto',
        }

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange = (textareaHeight, parentHeight) => {

        this.setState({
            parentHeight: parentHeight,
            textareaHeight: textareaHeight,
        });
    }

    handleClick = () => {


        this.setState({
            textIsCleared: false,
        });
        
        console.log(this.textIsCleared);
    }

    render() {
        return (
            <section className="section">
                <Textarea handleChange={this.handleChange} />
                <Buttons onClick={() => this.handleClick()} />
                <Textarea handleChange={this.handleChange} />
            </section>
          );
    }
}

export default class Textarea extends React.Component {
    constructor(props) {
        super(props);

        // this.state = {
        //     parentStyle: {
        //         minHeight: this.props.parentHeight,
        //     },
        //     textareaStyle: {
        //         height: this.props.textareaHeight,
        //     },
        // }

        this.parentStyle = {
            minHeight: `${this.props.parentHeight}px`,
        }
        
        this.textareaStyle = {
            height: `${this.props.textareaHeight}px`,
        }

       this.onChange = this.onChange.bind(this);

    }

    onChange = (e) => {

        const newTextareaHeight = e.target.scrollHeight;
        const newParentHeight = e.target.parentElement.scrollHeight;
        
        
        this.props.handleChange(newTextareaHeight, newParentHeight);

        this.setStyles();
    }

    setStyles = () => {

        // this.setState({
        //     parentStyle: {
        //         ...this.state.parentStyle,
        //         minHeight: `${this.props.parentHeight}px`,
        //     },
        //     textareaStyle: {
        //         ...this.state.textareaStyle,
        //         height: `${this.props.textareaHeight}px`,
        //     },
        // })

        
    }

    render() {

        const parentStyle = `${this.props.parentHeight}px`;
        const textareaStyle = `${this.props.textareaHeight}px`;

        return (
            <div className="content_wrap" style={{minHeight: parentStyle}}>
            <textarea
                
                className="content_textarea"
                onChange={this.onChange} 
                rows={1}
                style={{height: textareaStyle}}
    
            />                      
        </div>
        )
    }
}

Answer 1

Probably the issue is that in the Textarea component you're trying to read parentHeight and textareaHeight values from props, but in the Main component you're not passing these props down to the child Textarea.