// родительский компонент
class App extends Component {
constructor(props) {
super(props);
this.state = {
popout: null,
TestResults: []
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit (event){
event.preventDefault();
fetch("url", {
method: "POST",
headers: {
"Content-type": "application/json"
},
mode: "no-cors",
credentials: "include",
body: "response.formData()"
})
.then(result => result.json())
.then(
(result) => {
// Есть результат
this.setState({
isLoaded: true,
TestResults: result
});
},
(error) => {
// Ошибка
this.setState({
isLoaded: true,
error
});
}
);
}
render() {
return (
// Рендер формы
<Form onSubmit={this.handleSubmit} >
<Input type="text" placeholder="Your name" label="Ваше имя" required />
<Input type="tel" placeholder="Phone" label="Ваш телефон" required />
<Input type="email" placeholder="E-mail" label="Ваш e-mail" required />
<Button type="submit" value="Submit">Отправить</Button>
</Form>
// Вызов дочернего компонента
<PrintResult Results={this.handleSubmit} />
);
}
}
// Дочерний компонент
class PrintResult extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
Results: this.props.TestResults
};
}
render() {
const { error, isLoaded, Results } = this.state;
if (error) {
return (
// Сообщение ошибки
);
} else if (!isLoaded) {
return (
// Экран загрузки
);
} else {
return (
// Вывод полученных данных
{Results.map((item) => (
{item}
))}
);
}
}
}
export default App;Если "нужное место" - это другой компонент, то значит нужно стейт держать в родителе и обновлять его с помощью функции переданной в качестве props в компонент, где данные вызываются. А другой компонент, где данные нужны, просто получает их из стейта компонента родителя в качестве props и так же отрисовывает