CODEWITHSUNDEEP
reactjsmaterial-ui
user5992977
user5992977

Reputation:

How to set TextField to empty string?

I want the text field to contain the data, and if column is null, the textField will be empty as well. This solution works, but it seems ugly as it contains a string. If I use an empty string '' then the label "becomes" the value ( instead of appearing as the label of the textfield, it appears as the value it self, position wise).. What do I need to change ?

  <TextField
          margin="normal"
          fullWidth
          inputProps={{
            disabled: true
          }}
          // eslint-disable-next-line
          label={labels.accountNumber}
          value={props.column || ' '}
    />

Upvotes: 0

Views: 1363

Answers (2)

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8122

Please add it will retain the label on upper side.

InputLabelProps={{
      shrink: true,
    }}

Upvotes: 1

Lesleyvdp
Lesleyvdp

Reputation: 323

If you want it to display the account number label when props.column is null, you can use the following:

<TextField
      margin="normal"
      fullWidth
      inputProps={{
        disabled: true
      }}
      // eslint-disable-next-line
      label={labels.accountNumber}
      value={props.column !== null ? props.column : labels.accountNumber}
/>

Bare in mind that this still keeps the label property on the TextField.

Upvotes: 0

Related Questions