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;

CodePudding user response：

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})
}