How to cleanly pass information to an enclosing component?

Question

I'm a clueless mobx beginner who just found myself doing strange things like passing a "holder" struct in props to an inner component which modifies its content and this way propagates the changes to the outer component. That sounds pretty dirty, but passing a bunch of callbacks feels even more dirty.

The passed information contains things like the index of the first visible element, which is something, nobody but the inner component can and should compute. The other components shouldn't even know that there's a scrollbar or alike.

I hope this snippet illustrates my problem. Can you point me to a clean solution?

@observer class Inner {
    _someChange = (event) => {
        this.props.holder.something = event.something
    }

    _anotherChange = (whatever) => {
        this.props.holder.anotherthing = whatever.anotherthing
    }

    render() {
        return <div>
            <Something onClick={this._someChange} onWhatever={this._anotherChange}/>
    </div>
}

@observer class Outer {
    @observable _holder = {
         something: 0,
         anotherthing: '',
    }

    render() {
        return <div>
            <Inner holder={this._holder}/>
            <AComponentNeedingTheHolderContent something={this._holder.something}/>
        </div>
    }
}