Problem Chakra Slider in React Function: undefined event.target - reactjs

Question

I'm changing React Class into function for a component with text and number input from database (mongodb). The function handleInputChange works fine for input text and number, but not with the slider. Don't know, how to solve. TypeError: Cannot destructure property 'name' of 'event.target' as it is undefined.
const ProgrammUpdate = props => {
const {id} = useParams();
const initialProgrammState = {
id: null,
title: "",
description: "",
volume_left: "",
volume_right: "",
}
const [currentProgramm, setCurrentProgramm] = useState(initialProgrammState);
const {user} = ChatState();
const toast = useToast();
const history = useHistory();
const [message, setMessage] = useState("");
const bg = useColorModeValue('brand.200', 'brand.100')
const color = useColorModeValue('gray.800', 'white')
const getProgramm = programmId => {
HoerprogrammDataService.get(programmId)
.then(response => {
setCurrentProgramm(response.data);
console.log(response.data);
})
.catch(e => {
console.log(e);
})
}
useEffect(() => {
if (id)
getProgramm(id);
// eslint-disable-next-line
console.log(id)
}, [id]);
const handleInputChange = event => {
const {name, value} = event.target;
setCurrentProgramm({...currentProgramm, [name]: value});
};
const updateProgramm = () => {
HoerprogrammDataService.update(id, currentProgramm)
.then(response => {
console.log(response.data);
// setMessage("The tutorial was updated successfully!");
history.push('/programme');
})
.catch(e => {
console.log(e);
});
};
const deleteProgramm = () => {
HoerprogrammDataService.delete(currentProgramm.id)
.then(response => {
console.log(response.data);
history.push('/programme');
})
.catch(e => {
console.log(e);
});
};
return<LandingLayout>
<h2>Test</h2>
{currentProgramm ? (<>
<Input
placeholder={currentProgramm.title} size='md'
type="text"
className="form-control"
id="title"
required
value={currentProgramm.title}
onChange={handleInputChange}
name="title"
/>
<Input
placeholder={currentProgramm.volume_left}
type="text"
className="form-control"
id="volume_left"
value={currentProgramm.volume_left}
onChange={handleInputChange}
name="volume_left"
/>
<Slider
flex='1'
value={currentProgramm.volume_left}
onChange={handleInputChange}
orientation='horizontal'
minH='20'
name="volume_left"
min={0} max={10} step={1}
>
<SliderMark value={0} mt='12' ml='-1.5' fontSize='md'>0</SliderMark>
<SliderMark value={5} mt='12' ml='-1.5' fontSize='md'>5</SliderMark>
<SliderMark value={10} mt='12' ml='-1.5' fontSize='md'>10</SliderMark>
<SliderTrack bg='blue.200'>
<SliderFilledTrack bg="blue.400" />
</SliderTrack>
<SliderThumb bg="blue.400" fontSize='md' boxSize='40px' children={currentProgramm.volume_left}>{currentProgramm.volume_left}</SliderThumb>
</Slider>
<Routelink to={"/programme"} className={"nav-link"}>
<Button variant={ "outline"} colorScheme={"red"}>Abbruch</Button>
</Routelink>
<button className="badge badge-danger mr-2" onClick={deleteProgramm}>
Delete
</button>
<button
type="submit"
className="badge badge-success"
onClick={updateProgramm}
>
Update
</button>
<p>{message}</p>
</>
) : (
<Box d="flex" alignItems="center" justifyContent="center" h="100%">
<Text fontSize="3xl" pb={3} fontFamily="Work sans">Programm nicht geladen</Text>
</Box>
)}
</LandingLayout>
}
export default ProgrammUpdate;

Answer 1

You were getting this error because Slider onChange method passes the actual value, not the event object. On the other hand, the Input onChange method passes the event.
Your Slider onChange method will look something like this-
const handleSliderChange = (val) => {
setCurrentProgramm({...currentProgramm, volume_left: val})
}