CODEWITHSUNDEEP
javascriptreactjsecmascript-6material-uifrontend
theWanderer
theWanderer

Reputation: 656

ReactJS: How to trim label when it is a long text in material ui autocomplete

I am using material UI autocomplete... I want to trim the label when it is a long text.

    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => 
      <TextField {...params} label="This is very long 
      labellllllllllllllllllllllllllllllllllllllllllll" variant="outlined" />}
    />

enter image description here

Upvotes: 1

Views: 1061

Answers (1)

BackSlashHaine
BackSlashHaine

Reputation: 159

You can use the function substring().

The method returns the part of the string between the start and end indexes, or to the end of the string.

const str = 'labelllllllllllll';

console.log(str.substring(0, 6));
// expected output: "label"

console.log(str.substring(2));
// expected output: "bel"

then in your Textfield you can use:

label={str.substring(0, 6)}

Upvotes: 2

Related Questions