In React, directly updating state in one child component from another without involving the parent is challenging due to the "one-way data flow" principle. This ensures data flows down from parent to child, making applications more predictable.
However, if you really want to avoid modifying App.jsx as a parent, you can go through few alternative approaches:
Context API: You can create a context to hold shared state (like newSubstance) and the setter function (setNewSubstance). Both SubstanceForm and PreviousSearches can then access and modify this shared state, bypassing the need to lift the state into App.jsx.
Custom Hook: Another way is to create a custom hook to manage the newSubstance state. This can be imported and used by both components without needing to modify App.jsx.