组件之间的状态维护

Question

我是新来的反应者。我对维护组件之间的状态有一些疑问。我在维护状态方面有问题。这可能是个大问题。

简单形式：如果我拥有超过3个以上的组件，可以在哪里维护状态？

详细信息：例如，我具有以下组件

Main.js - 
   Filter.js
      Dropdown1.js
      Dropdown2.js
   Result.js
      ViewDetails.js
          PopulateDataForView.js

Main.js -包含过滤器和结果组件的主要组件。

Filter.js -包含以下下拉列表元素

Dropdown1.js -使用api调用添加的选项

Result.js -它会基于过滤器组件中的选择显示记录。因此，基本上它将从Filter.js中获取详细信息

ViewDetails.js -如果在result.js中单击了任何记录，则此组件将显示有关该行ID的详细信息。

PopulateDataForView.js -它是viewDetails组件的帮助程序组件。 它将填充一些数据并将其提供给ViewDetails.js

Filter.js具有自己的状态，以维护下拉列表的onchange值，并将其发送到Result.js。 Result.js也有它自己的状态。

Result.js从Filter.js获取数据，并进行axios调用并显示结果。

那么，在这里我可以维护州？哪个组件最适合维护它，或者我可以使用多个组件来维护它？