Can you assist me with implementing an interface wrapped within a second interface? Here is the code snippet for the reducer:
import { createSlice } from '@reduxjs/toolkit';
export interface IStep {
id: number;
label: string;
value: string;
placeholder: string;
}
export interface InitialState {
activeStep: number;
steps: IStep[];
}
const initialState: InitialState = {
activeStep: 0,
steps: [
{
id: 0,
label: 'First Name',
value: '',
placeholder: 'First Name',
},
......
],
};
export const slice = createSlice({
name: 'multiStepForm',
initialState,
reducers: {
......
},
});
I want to use the InitialState interface in my Step component, which currently looks like this:
import React from 'react';
import { IStep } from 'redux/reducers/multiStepForm';
interface IPropsStep {
activeStep: number;
steps: IStep[];
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
const Step = ({ activeStep, steps, handleChange }: IPropsStep): JSX.Element => {
return (
<input
id={steps[activeStep].id}
type="text"
onChange={handleChange}
placeholder={steps[activeStep].placeholder}
value={steps[activeStep].value}
/>
);
};
export default Step;
It's evident that activeStep and steps are part of InitialState, but I'm unsure how to incorporate them.
I've attempted to do it as follows:
interface IPropsStep extends InitialState {
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
const Step = ({ handleChange }: IPropsStep): JSX.Element => {
return (
<input
id={steps[activeStep].id}
type="text"
onChange={handleChange}
placeholder={steps[activeStep].placeholder}
value={steps[activeStep].value}
/>
);
};
However, I'm encountering errors because steps and activeStep are unknown in this context. How can I resolve this issue?