TypeError: Cannot read property 'value' of undefined React js

Question

when I search on Search bar then getting an error like cannot read property value, why this error came , previously I did lots of form but this error not came, please tell me why this error came, should I used material UI instead of Bootstrap replace

Music.js

This is the music.js file where I got error, and I am use react-hooks to manage state

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import RadioIcon from '@material-ui/icons/Radio';
import firebase from '../Firebase';
import SearchBar from "material-ui-search-bar";
import { useHistory } from 'react-router-dom';
import { Container, Input, TextField } from '@material-ui/core';



const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
    search:{
        marginTop:30,
    },
}));

const Music = () => {

    const [search, setSearch] = useState("");

    const history = useHistory();

    const Logout = () => {
        firebase.auth().signOut().then(() => {
            alert("Logout Successfull...");
            history.push('/');
        }).catch((error) => {
            console.log(error);
        });
    }

    const classes = useStyles();

    return (
        <div className={classes.root}>
                <AppBar position="static">
                    <Toolbar>
                        <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                            <RadioIcon style={{ fontSize: "30px" }} />&nbsp; React Music
                    </IconButton>
                        <Typography variant="h6" className={classes.title}>
                        </Typography>
                        <Button color="inherit" onClick={Logout}> <ExitToAppIcon /> Logout </Button>
                    </Toolbar>
                </AppBar>
                <Container>
                    <SearchBar className={classes.search}
                    value={search}
                    onChange={(e)=>setSearch(e.target.value)}/>
                </Container>
                
        </div>
    );
}

export default Music;

Which line is throwing the error?

mousetail
– mousetail

2021-04-29 07:15:50 +00:00
Commented Apr 29, 2021 at 7:15 — mousetail
– mousetail, Commented Apr 29, 2021 at 7:15
line number 65 onChange={(e)=>setSearch(e.target.value)}

Monu Patil
– Monu Patil

2021-04-29 07:17:01 +00:00
Commented Apr 29, 2021 at 7:17 — Monu Patil
– Monu Patil, Commented Apr 29, 2021 at 7:17

mousetail · Accepted Answer · 2021-04-29 07:19:04Z

2

Following the example from the documentation, onChange simply takes the new value, not an event, as a parameter.

You can fix your code like this:

onChange((newValue)=>setSearch(newValue))

answered Apr 29, 2021 at 7:19

mousetail

8,1696 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Priyank Kachhela · Accepted Answer · 2021-04-29 07:19:18Z

2

As per documents onChange method returns newValue so you should change your method to:

<SearchBar className={classes.search}
 value={search}
 onChange={(newValue)=>setSearch(newValue)}/>

answered Apr 29, 2021 at 7:19

Priyank Kachhela

2,64511 silver badges17 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'value' of undefined React js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related