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

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