Answer the question
In order to leave comments, you need to log in
How to pass data received from Ajax to another React component?
Good afternoon friends.
I have two components, one filter. Another list of products (it is empty by default)
In the filter component, when a section is selected, Axios Returns the products of this section, I get them from, everything is ok.
But how can I pass now to another component to parse? After all, I can process the section selection event only in the filter, and this is another component.
On the page, these components are in different places.
Filter example:
import React, { Component } from 'react';
// Тут еще всякие константы и функции
class SearchTree extends React.Component {
GetCount = (checkedKeys) => {
axios
.post('/url', {products: checkedKeys})
.then(function (response) {
//вот товары пришли Как мне их передать в другой компонент?
console.log(response.data)
})
}
onCheck = (checkedKeys, info) => {
//получаем товары раздела
this.GetCount(checkedKeys)
}
render() {
return (
<div>
// тут список разделов формируется и onCheck на них
</div>
);
}
}
//тут ReactDOM.render
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class AjaxProductList extends React.Component {
render() {
return (
// тут типа UL LI нужно получить товар и вывести списком
);
}
}
//тут ReactDOM.render
Answer the question
In order to leave comments, you need to log in
Your filter should only toggle some state via a callback or redux action. It should not know anything about the existence of any data or API.
Solutions:
1. Lifting state up
2. Redux or equivalents.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question