Search code examples
reactjsreact-propsreact-state

How to determine what state is passed on to a child component


Say I have the following states:

const [firstInputs, setFirstInputs] = useState({
    firstName: '',
    lastName: '',
    somethingUniqueToFirstInputs: '',
});
const [secondInputs, setSecondInputs] = useState({
    firstName: '',
    lastName: '',
    somethingUniqueToSecondInputs: ''
});

Then, with conditional rendering, I'll pass them to component where the props passed will depend on the current tab, like this:

{tab === 0 && (
    <ReviewInputs {...firstInputs} />
)}
{tab === 1 && (
    <ReviewInputs {...secondInputs} />
)}

The <ReviewInputs /> component will display the inputs, and change slightly depending on what state was passed. How to determine what state was passed in the <ReviewInputs /> component?


Solution

  • You can pass another state which will be a boolean which will determine which state has been passed by or give an unique field in both of the current states to determine which has been sent