I try to determine the shelf life of three fruits in days. In one component are the fruits in radio buttons and in the second component are two ranges each days and quantity. By selecting certain values, I want a third component to display the shelf life in days.

My goal is to pull the values for shelf life in days from an array:

For example: selected is Apple, quantity is 10 and temperature is 30. These values should show an object from an array.

Here are the sample codes:

radio

range quantity

range temperature

array example

This is the view:

frontend view

CodePudding user response：

As I understood, you want to pass the values from the 2 components to the third component. For that, there are multiple solutions:

1. You can have states for the data in the common parent component (the one, which wraps all three components) and pass state, setState values to the components as props
2. You can use useContext hook, to manage global state. You can read more about it in docs

CodePudding user response：

if i undestood your question, you are trying to pull state from 3 components and return it in a desired shape

<ControlledRadioButtonGroup/>
<firstSlider/>
<secondSlider/>

in my opinion the best think to do in your case is to manage all your 3 components states in 1 Parent

 <Parent>
        <ControlledRadioButtonGroup/>
        <firstSlider/>
        <secondSlider/>
 </Parent>

you must move all your React.useState(...) inside the parent then voilà you can access the 3 values !