Input fields read only, no onChange

Hi,

I’m making a multi-step form, this is a very basic example of how it’s setup. I’m passing handleChange through to onChange function on each step of the form, which is just a series of inputs.

When I test the form, all the inputs are readonly, suggesting there is no onChange set. I’ve used the handleChange on other forms within my SPA, but they are single page forms.

So I don’t believe it’s the function, is it the way it’s being passed?

// Master Form import StepOne from “./StepOne”; import useForm from “../hooks/useForm”; const MasterForm = () => { const { handleChange, values } = useForm(); return ( <> <Form> <StepOne handleChange={handleChange} values={values} /> </Form> </> ); }; export default MasterForm; // StepOne Component const StepOne = (props) => { const { handleChange, values } = props; return ( <> <input type=”text” onChange={handleChange} value={values.title} /> </> ); }; export default StepOne;