Из вопроса непонятно, где проблема.
Вы грузите данные асихнронно в том компоненте, где они вам нужны в момент componentDidMount, затем пишете их в state (с помощью this.setState) и реакт сам вызовет функцию рендер => на экране появятся ваши данные.
> Чтобы обработчик сабмита посылал данные
сделать запрос
> получал данные и сразу их выводил в нужном месте
положить в state. Если "нужное место" - это другой компонент, то значит нужно стейт держать в родителе и обновлять его с помощью функции переданной в качестве props в компонент, где данные вызываются. А другой компонент, где данные нужны, просто получает их из стейта компонента родителя в качестве props и так же отрисовывает (если приехали новые props реакт тоже вызывает render)
Ключевой момент: если ваши компоненты не знают ничего друг о друге, то вам нужно распологать данные "наверху" в общем родителе.
p.s. по-моему вы все верно начинаете разбирать, главное помнить, что в качестве props можно из родителя передать функцию (коллбэк), и через нее можно будет установить данные в стейт родителя и тд тп.
p.p.s. обычно так делать не приходится, потому что либо данные заранее живут в нужном компоненте, либо вы уже используете redux или что-то подобное.
// Parent component
...
state = {
data: [],
}
...
myMethodInParent = (values) => {
this.setState({data: values })
}
...
render() {
...
<AnyChildren testName={this.myMethodInParent} />
}
// AnyChildren component
...
handleSubmit() => {
this.props.testName( _ваши_данные_которые_нужно_в_стейт_родителя_ )
}
...
render() {
...
}
