React and events from child to parent

[nzz.coding]

I have a parent component with 2 child components, i want to implement a zoom on child component upon a click on a resize button.

i decided to handle everything on the parent, because on resize i want the other child component to not be displayed, here is some code:

parent:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editorInput: '',
            previewInput: '',
            editorZoomed: "false",
            previewerZoomed: "false"
        };

        this.handleEditorResize = this.handleEditorResize.bind(this);
        this.handlePreviewerResize = this.handlePreviewerResize.bind(this);
    }

    componentDidMount() {
        this.setState((state, props) => ({ editorInput: document.getElementById("editor").value }));
    }

    handleEditorResize(event) {
        let zoomed = event.target.getAttribute('resized');
        if (zoomed === "true") {
            document.getElementById("previewer-box").style.removeProperty("display");
            this.setState((state, props) => ({ editorZoomed: "false" }));
        } else if (zoomed === "false") {
            document.getElementById("previewer-box").style.display = "none";
            this.setState((state, props) => ({ editorZoomed: "true" }));
        }
    }

    handlePreviewerResize(event) {
        let zoomed = event.target.getAttribute('resized');
        if (zoomed === "true") {
            document.getElementById("editor-box").style.removeProperty("display");
            this.setState((state, props) => ({ previewerZoomed: "false" }));
        } else if (zoomed === "false") {
            document.getElementById("editor-box").style.display = "none";
            this.setState((state, props) => ({ previewerZoomed: "true" }));
        }
    }

    render() {
        return (
            <div className="App">
                <Editor
                    componentName="editor-box"
                    textChange={this.handleEditorChange}
                    resize={this.handleEditorResize}
                    resizeState={this.state.editorZoomed}
                    />
                <Previewer
                    componentName="previewer-box"
                    textChange={this.parseExpression(this.state.editorInput)}
                    resize={this.handlePreviewerResize}
                    resizeState={this.state.previewerZoomed}
                    />
            </div>
        );
    } 
}

child:

class Editor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            resized: props.resizeState
        };
    }

    render() {
        return (
            <div id={this.props.componentName}>
                <div id="editor-header" className="App-box">
                    <FontAwesomeIcon icon={faIndent} className="App-box-logo"/>
                    <h3>Editor</h3>
                    <button
                        id="resize-editor"
                        className="App-box-button"
                        resized={this.state.resized}
                        onClick={this.props.resize}><i>resize button logo</i></button>
                </div>
                <div id="editor-body">
                    <textarea id="editor" onChange={this.props.textChange} defaultValue="
                        "
                    />
                </div>
            </div>
        )
    }
}

now i realize there is some redundancy in the code, this is not what i intend to be the final code, i just want to know where the problem is ?

i want the resize button to be toggled on/off, but in this code it can only be triggered once, when i try to toggle it off it doesn’t work, and the state doesnt change .

any help would be greatly appreciated

[jenovs]

You’re assigning props.resizeState to state in constructor, but you never listen to props change. Either listen to changes in componentDidUpdate or use props.resizeState directly.

[nzz.coding]

From your answer i get that he child component re-renders everytime with new props passed from the parent, but the constructor is called only once.

i changed the child components to be stateless and only use props, now there seems to be another problem, the buttons don’t work all the time, sometimes they do, sometimes they don’t, i think it must be related to asynchronous behaviour when rendering the child components, maybe i should add an event listener when component mounts ?

thank you for helping out.

[jenovs]

Firstly, you should use codepen or codesandbox to post working version of your code.

My guess would be that the bug is caused by manipulating the DOM outside of React.