Material ui TextField Label text problem, why is not label text visible?

Question

I learn ReactJs and material-ui and now I have a problem with material TextField.

The code below creates this:

The problem I have is that the label="Tag Name" does not show the label text in the TextField.

When I click the TextField it looks like this:

The label label="Tag Name" should be visible in the TextFiled like this:

Please advice what is wrong?

import React from 'react';
import { connect } from 'react-redux';
import Dots from 'react-activity/lib/Dots';
import 'react-activity/lib/Dots/Dots.css';
import { Button, FormControl, InputLabel, Select, TextField, MenuItem } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import { compose } from 'recompose';
import { changeDisplayName } from '../../../../../redux/userData/user.actions';

const styles = theme => ({
    root: {
        backgroundColor: theme.palette.primary.light,
        // textAlign: 'center',
        padding: '10px',
        margin: 'auto',
        display: 'flex',
        justifyContent: 'space-around',
    },
    tagTextField: {
        textAlign: 'left',
        padding: '8px',
        margin: '5px',
        border: 'none',
        borderRadius: '2px',
        fontSize: '12pt',
        // background: 'blue',
    },
    input: {
        background: 'white',
        color: 'black',
    },
    changeNameButton: {
        backgroundColor: theme.palette.primary.main,
        boxShadow: theme.shadows[5],
        border: 'none',
        borderRadius: '2px',
        color: 'white',
        margin: '5px',
        padding: '8px',
        cursor: 'pointer',
        '&:hover': {
            cursor: 'pointer',
            backgroundColor: theme.palette.primary.dark,
        },
        '&:active': {
            cursor: 'pointer',
            backgroundColor: theme.palette.primary.dark,
        },
        '&:disabled': {
            cursor: 'default',
            color: 'gray',
            backgroundColor: theme.palette.primary.main,
        },
    },
});

class AddTag extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tagName: '',
            categoryName: 'aaa',
            categoryNames: ['aaaa', 'bbbb', 'cccc', 'dddd', 'fff'],
        };
    }

    submit = () => {
        // let todoListCopy = [...this.state.todoList];
        // todoListCopy.push({
        //  todoName: this.state.todoName,
        //  userName: this.state.userName,
        // });
        // this.setState({
        //  todoName: '',
        //  todoList: todoListCopy,
        // });
    };

    changeCategoryName = categoryName => {
        this.setState({
            categoryName,
        });
    };

    changeTagName = tagName => {
        this.setState({
            tagName,
        });
    };

    render() {
        const { classes } = this.props;
        const { tagName, categoryName, categoryNames } = this.state;

        return (
            <div className={classes.root}>
                <TextField
                    className={classes.tagTextField}
                    id="outlined-basic"
                    label="Tag Name"
                    variant="outlined"
                    value={tagName}
                    onChange={e => this.changeTagName(e.target.value)}
                    autoComplete="off"
                    InputProps={{
                        className: classes.input,
                    }}
                />
                <FormControl>
                    <InputLabel id="demo-simple-select-helper-label">Category</InputLabel>
                    <Select
                        labelId="demo-simple-select-helper-label"
                        id="demo-simple-select-helper"
                        value={categoryName}
                        onChange={e => this.changeCategoryName(e.target.value)}
                    >
                        {categoryNames &&
                            categoryNames.map((element, index) => {
                                return (
                                    <MenuItem value={element} key={index}>
                                        {element}
                                    </MenuItem>
                                );
                            })}
                    </Select>
                </FormControl>
                <Button
                    className={classes.changeNameButton}
                    onClick={() => this.submit()}
                    variant="contained"
                    color="primary"
                    disabled={!tagName && !categoryName}
                >
                    Save Tag
                </Button>
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => ({
    changeUserDisplayName: displayName => dispatch(changeDisplayName(displayName)),
});

const mapStateToProps = state => {
    return {
        savingDisplayName: state.user.isSavingDisplayName,
        newDisplayName: state.user.displayName,
        changeDisplayNameErr: state.user.changeDisplayNameErrMsg,
    };
};
const enhance = compose(withStyles(styles), connect(mapStateToProps, mapDispatchToProps));
export default enhance(AddTag);

Answer 1

There is prop for this placeholder