None of the Tabs' children match with `[object Object]`. You can provide one of the following values: 0, 1

Question

I am building header using material UI Tab Component but I see below error:

index.js:2178 Material-UI: The value provided to the Tabs component is invalid. None of the Tabs' children match with [object Object]. You can provide one of the following values: 0, 1.

I tried console.log the newValue to see what value it is getting and I can see 0 and 1 while navigating through tabs.

Note : Removed Some Code for better visibility

Here is my component:

   const Header = (props) => {
      const { classes } = props;
    
      const [value, setValue] = useState(0);
    
      const [modalIsOpen, setIsOpen] = React.useState(false);
    
      const openModal = () => {
        setIsOpen(true);
      };
    
      const closeModal = () => {
        setIsOpen(false);
      };
    
      const handleTabChange = (event, newValue) => {
        console.log(newValue);
        setValue({ newValue });
      };
    
      return (
        <div>
          <div className="topnav">
            <img src={logo} className="logo" alt="Movies App Logo" />
            <div className="topnav-right">
              <Button variant="contained" color="default" onClick={openModal}>
                Login
              </Button>
            </div>
    
            <div className="topnav-right">
              <Button variant="contained" color="default">
                Logout
              </Button>
            </div>
          </div>
    
          <Modal
            ariaHideApp={false}
            isOpen={modalIsOpen}
            onRequestClose={closeModal}
            contentLabel="Login"
            aria-labelledby="Modal"
            aria-describedby="Modal for Login and Registration"
            style={customStyles}
          >
            <Paper className={classes.Paper}>
              <CardContent>
                <Tabs
                  className="tabs"
                  value={value}
                  onChange={handleTabChange}
                  centered
                >
                  <Tab label="Login" />
                  <Tab label="Register" />
                </Tabs>
                {value === 0 && (
                  <div>
                    <FormControl required>
                      <InputLabel htmlFor="username" className={classes.inputLable}>
                        Username
                      </InputLabel>
                      <Input
                        className={classes.Input}
                        id="username"
                        type="text"
                        username={username}
                        onChange={usernameChangeHandler}
                      />
                      <FormHelperText>
                        <span className="red">required</span>
                      </FormHelperText>
                    </FormControl>
    
                    <br />
                    <br />
    
                    <FormControl required>
                      <InputLabel
                        htmlFor="loginPassword"
                        className={classes.inputLable}
                      >
                        Password
                      </InputLabel>
                      <Input
                        className={classes.Input}
                        id="loginPassword"
                        type="password"
                        password={password}
                        onChange={passwordChangeHandler}
                      />
                      <FormHelperText>
                        <span className="red">required</span>
                      </FormHelperText>
                    </FormControl>
                    <br />
                    <br />
                    {loggedIn === true && (
                      <FormControl>
                        <span className="success-text">Login Successful!</span>
                      </FormControl>
                    )}
    
                    <br />
                    <br />
    
                    <Button
                      variant="contained"
                      color="primary"
                      onClick={loginHandler}
                    >
                      LOGIN
                    </Button>
                  </div>
                )}
    
                {value === 1 && (
                  <div>
                 <h1>something</h2>
                  </div>
          
                )}
              </CardContent>
            </Paper>
          </Modal>
        </div>
      );
    };
    
    export default withStyles(styles)(Header);

Answer 1

For some reason you enclosed the value in an object (curly braces syntax).

Replace setValue({ newValue }) with setValue(newValue).