Editing states between high and low order components

Question

I have this hieriechy . Both of journal page and one journal component are class components

Now when i would like to edit something from Low Order to High order . i pass an function via props . and then use it inside the low order component ex.

JournalPage.js

            <OneJournal
            accounts={this.state.Accounts}
            journal={value}
            onJournalDelete={this.handleOneJournalDelete}
            totalAccounts={this.state.TotalTypes}
            handleOneJournalChange={this.handleOneJournalChange} <=== the function which edit the highr order via low order

My question is how i can edit a state value in a Low order component from a High order component without using a third party library ?

Answer 1

form what I understand you want to update the parent component state from the children you can do this

class childrenComp extends Component {

    updateState = ()=> {
        this.props.updateState({title: 'edit'})
    }
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

class Parent extends Component {
    state = {
        title: ''
    }
    render() {
        return (
            <childrenComp setState={this.setState}>
                
            </childrenComp>
        )
    }
};