Any way to render Icon based on text field name using material UI?

<TextField  

 margin='dense'    

 fullWidth 

 value={this.props.value} 

 name={this.props.name}   

 type={this.props.type} 

 error={this.props.error !== ''}

 helperText={this.props.error !== '' ? this.props.error : ' '}

 onChange={ e => this.handleChange(e) }

 label={this.props.label} 

 variant= {this.props.variant}

 id={this.props.name}   

 InputProps={{

  endAdornment: (

   <AccountCircle />

  ),

 }}

/>

Is there any way to display different Icons based on Text field name? I mean, If the name is Email then display EmailIcon. If profile then displays AccountCircle.

edited Dec 28 '18 at 16:01

Nadun

1,217713

asked Dec 28 '18 at 14:26

sheik

284

Create a wrapper component on TextField which accepts icon as a props and will pass that as adornment.

– Ravi Teja
Dec 28 '18 at 14:53

add a comment |

<TextField  

 margin='dense'    

 fullWidth 

 value={this.props.value} 

 name={this.props.name}   

 type={this.props.type} 

 error={this.props.error !== ''}

 helperText={this.props.error !== '' ? this.props.error : ' '}

 onChange={ e => this.handleChange(e) }

 label={this.props.label} 

 variant= {this.props.variant}

 id={this.props.name}   

 InputProps={{

  endAdornment: (

   <AccountCircle />

  ),

 }}

/>

Is there any way to display different Icons based on Text field name? I mean, If the name is Email then display EmailIcon. If profile then displays AccountCircle.

edited Dec 28 '18 at 16:01

Nadun

1,217713

asked Dec 28 '18 at 14:26

sheik

284

Create a wrapper component on TextField which accepts icon as a props and will pass that as adornment.

– Ravi Teja
Dec 28 '18 at 14:53

add a comment |

<TextField  

 margin='dense'    

 fullWidth 

 value={this.props.value} 

 name={this.props.name}   

 type={this.props.type} 

 error={this.props.error !== ''}

 helperText={this.props.error !== '' ? this.props.error : ' '}

 onChange={ e => this.handleChange(e) }

 label={this.props.label} 

 variant= {this.props.variant}

 id={this.props.name}   

 InputProps={{

  endAdornment: (

   <AccountCircle />

  ),

 }}

/>

Is there any way to display different Icons based on Text field name? I mean, If the name is Email then display EmailIcon. If profile then displays AccountCircle.

edited Dec 28 '18 at 16:01

Nadun

1,217713

asked Dec 28 '18 at 14:26

sheik

284

<TextField  

 margin='dense'    

 fullWidth 

 value={this.props.value} 

 name={this.props.name}   

 type={this.props.type} 

 error={this.props.error !== ''}

 helperText={this.props.error !== '' ? this.props.error : ' '}

 onChange={ e => this.handleChange(e) }

 label={this.props.label} 

 variant= {this.props.variant}

 id={this.props.name}   

 InputProps={{

  endAdornment: (

   <AccountCircle />

  ),

 }}

/>

Is there any way to display different Icons based on Text field name? I mean, If the name is Email then display EmailIcon. If profile then displays AccountCircle.

reactjs material-ui

edited Dec 28 '18 at 16:01

Nadun

1,217713

asked Dec 28 '18 at 14:26

sheik

284

edited Dec 28 '18 at 16:01

Nadun

1,217713

asked Dec 28 '18 at 14:26

sheik

284

edited Dec 28 '18 at 16:01

Nadun

1,217713

edited Dec 28 '18 at 16:01

Nadun

1,217713

edited Dec 28 '18 at 16:01

Nadun

1,217713

asked Dec 28 '18 at 14:26

sheik

284

asked Dec 28 '18 at 14:26

sheik

284

asked Dec 28 '18 at 14:26

sheik

284

Create a wrapper component on TextField which accepts icon as a props and will pass that as adornment.

– Ravi Teja
Dec 28 '18 at 14:53

add a comment |

Create a wrapper component on TextField which accepts icon as a props and will pass that as adornment.

– Ravi Teja
Dec 28 '18 at 14:53

Create a wrapper component on TextField which accepts icon as a props and will pass that as adornment.

– Ravi Teja
Dec 28 '18 at 14:53

add a comment |

2 Answers
2

active

oldest

votes

here is a simple solution so you can start it from here

let icon = null; 

if (this.props.name === "Password") {

  icon = <Visibility />;

} else if (this.props.name === "Account") {

  icon = <AccountCircle />;

}

return (

  <div className={classes.root}>

    <TextField

      label={this.props.name}

      className={classNames(classes.margin, classes.textField)}

      InputProps={{

        endAdornment: icon

      }}

    />

  </div>

);

here I have put the name as a prop in this component and depend on that prop I change the icon. you can change this to switch if you wish.

hope you got an idea.

here is a link of a demo: https://codesandbox.io/s/moo68122lp

answered Dec 28 '18 at 15:11

Nadun

1,217713

add a comment |

You can do it in an elegant way, by abstracting like this:

import { AccountCircle, UserIcon, PhoneIcon } from 'some/ui/library';



const icons = {

  account: AccountCircle,

  user: UserIcon,

  phone: PhoneIcon,

};



const FieldIcon = ({ name }) => {

  const Icon = icons[name];

  return Icon ? (<Icon />) : null;

};



const YourComponent = props => (

  <TextField  

     margin='dense'    

     fullWidth 

     value={props.value} 

     name={props.name}   

     type={props.type} 

     error={props.error !== ''}

     helperText={props.error !== '' ? props.error : ' '}

     label={props.label} 

     variant= {props.variant}

     id={props.name}   

     InputProps={{

      endAdornment: (

       <FieldIcon name={props.name} />

      ),

     }}

   />

 );

answered Dec 28 '18 at 16:55

Michael Gutz

1465

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53960035%2fany-way-to-render-icon-based-on-text-field-name-using-material-ui%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

here is a simple solution so you can start it from here

let icon = null; 

if (this.props.name === "Password") {

  icon = <Visibility />;

} else if (this.props.name === "Account") {

  icon = <AccountCircle />;

}

return (

  <div className={classes.root}>

    <TextField

      label={this.props.name}

      className={classNames(classes.margin, classes.textField)}

      InputProps={{

        endAdornment: icon

      }}

    />

  </div>

);

here I have put the name as a prop in this component and depend on that prop I change the icon. you can change this to switch if you wish.

hope you got an idea.

here is a link of a demo: https://codesandbox.io/s/moo68122lp

answered Dec 28 '18 at 15:11

Nadun

1,217713

add a comment |

here is a simple solution so you can start it from here

let icon = null; 

if (this.props.name === "Password") {

  icon = <Visibility />;

} else if (this.props.name === "Account") {

  icon = <AccountCircle />;

}

return (

  <div className={classes.root}>

    <TextField

      label={this.props.name}

      className={classNames(classes.margin, classes.textField)}

      InputProps={{

        endAdornment: icon

      }}

    />

  </div>

);

here I have put the name as a prop in this component and depend on that prop I change the icon. you can change this to switch if you wish.

hope you got an idea.

here is a link of a demo: https://codesandbox.io/s/moo68122lp

answered Dec 28 '18 at 15:11

Nadun

1,217713

add a comment |

here is a simple solution so you can start it from here

let icon = null; 

if (this.props.name === "Password") {

  icon = <Visibility />;

} else if (this.props.name === "Account") {

  icon = <AccountCircle />;

}

return (

  <div className={classes.root}>

    <TextField

      label={this.props.name}

      className={classNames(classes.margin, classes.textField)}

      InputProps={{

        endAdornment: icon

      }}

    />

  </div>

);

here I have put the name as a prop in this component and depend on that prop I change the icon. you can change this to switch if you wish.

hope you got an idea.

here is a link of a demo: https://codesandbox.io/s/moo68122lp

answered Dec 28 '18 at 15:11

Nadun

1,217713

here is a simple solution so you can start it from here

let icon = null; 

if (this.props.name === "Password") {

  icon = <Visibility />;

} else if (this.props.name === "Account") {

  icon = <AccountCircle />;

}

return (

  <div className={classes.root}>

    <TextField

      label={this.props.name}

      className={classNames(classes.margin, classes.textField)}

      InputProps={{

        endAdornment: icon

      }}

    />

  </div>

);

here I have put the name as a prop in this component and depend on that prop I change the icon. you can change this to switch if you wish.

hope you got an idea.

here is a link of a demo: https://codesandbox.io/s/moo68122lp

answered Dec 28 '18 at 15:11

Nadun

1,217713

answered Dec 28 '18 at 15:11

Nadun

1,217713

answered Dec 28 '18 at 15:11

Nadun

1,217713

answered Dec 28 '18 at 15:11

Nadun

1,217713

add a comment |

You can do it in an elegant way, by abstracting like this:

import { AccountCircle, UserIcon, PhoneIcon } from 'some/ui/library';



const icons = {

  account: AccountCircle,

  user: UserIcon,

  phone: PhoneIcon,

};



const FieldIcon = ({ name }) => {

  const Icon = icons[name];

  return Icon ? (<Icon />) : null;

};



const YourComponent = props => (

  <TextField  

     margin='dense'    

     fullWidth 

     value={props.value} 

     name={props.name}   

     type={props.type} 

     error={props.error !== ''}

     helperText={props.error !== '' ? props.error : ' '}

     label={props.label} 

     variant= {props.variant}

     id={props.name}   

     InputProps={{

      endAdornment: (

       <FieldIcon name={props.name} />

      ),

     }}

   />

 );

answered Dec 28 '18 at 16:55

Michael Gutz

1465

add a comment |

You can do it in an elegant way, by abstracting like this:

import { AccountCircle, UserIcon, PhoneIcon } from 'some/ui/library';



const icons = {

  account: AccountCircle,

  user: UserIcon,

  phone: PhoneIcon,

};



const FieldIcon = ({ name }) => {

  const Icon = icons[name];

  return Icon ? (<Icon />) : null;

};



const YourComponent = props => (

  <TextField  

     margin='dense'    

     fullWidth 

     value={props.value} 

     name={props.name}   

     type={props.type} 

     error={props.error !== ''}

     helperText={props.error !== '' ? props.error : ' '}

     label={props.label} 

     variant= {props.variant}

     id={props.name}   

     InputProps={{

      endAdornment: (

       <FieldIcon name={props.name} />

      ),

     }}

   />

 );

answered Dec 28 '18 at 16:55

Michael Gutz

1465

add a comment |

You can do it in an elegant way, by abstracting like this:

import { AccountCircle, UserIcon, PhoneIcon } from 'some/ui/library';



const icons = {

  account: AccountCircle,

  user: UserIcon,

  phone: PhoneIcon,

};



const FieldIcon = ({ name }) => {

  const Icon = icons[name];

  return Icon ? (<Icon />) : null;

};



const YourComponent = props => (

  <TextField  

     margin='dense'    

     fullWidth 

     value={props.value} 

     name={props.name}   

     type={props.type} 

     error={props.error !== ''}

     helperText={props.error !== '' ? props.error : ' '}

     label={props.label} 

     variant= {props.variant}

     id={props.name}   

     InputProps={{

      endAdornment: (

       <FieldIcon name={props.name} />

      ),

     }}

   />

 );

answered Dec 28 '18 at 16:55

Michael Gutz

1465

You can do it in an elegant way, by abstracting like this:

import { AccountCircle, UserIcon, PhoneIcon } from 'some/ui/library';



const icons = {

  account: AccountCircle,

  user: UserIcon,

  phone: PhoneIcon,

};



const FieldIcon = ({ name }) => {

  const Icon = icons[name];

  return Icon ? (<Icon />) : null;

};



const YourComponent = props => (

  <TextField  

     margin='dense'    

     fullWidth 

     value={props.value} 

     name={props.name}   

     type={props.type} 

     error={props.error !== ''}

     helperText={props.error !== '' ? props.error : ' '}

     label={props.label} 

     variant= {props.variant}

     id={props.name}   

     InputProps={{

      endAdornment: (

       <FieldIcon name={props.name} />

      ),

     }}

   />

 );

import { AccountCircle, UserIcon, PhoneIcon } from 'some/ui/library';



const icons = {

  account: AccountCircle,

  user: UserIcon,

  phone: PhoneIcon,

};



const FieldIcon = ({ name }) => {

  const Icon = icons[name];

  return Icon ? (<Icon />) : null;

};



const YourComponent = props => (

  <TextField  

     margin='dense'    

     fullWidth 

     value={props.value} 

     name={props.name}   

     type={props.type} 

     error={props.error !== ''}

     helperText={props.error !== '' ? props.error : ' '}

     label={props.label} 

     variant= {props.variant}

     id={props.name}   

     InputProps={{

      endAdornment: (

       <FieldIcon name={props.name} />

      ),

     }}

   />

 );

import { AccountCircle, UserIcon, PhoneIcon } from 'some/ui/library';



const icons = {

  account: AccountCircle,

  user: UserIcon,

  phone: PhoneIcon,

};



const FieldIcon = ({ name }) => {

  const Icon = icons[name];

  return Icon ? (<Icon />) : null;

};



const YourComponent = props => (

  <TextField  

     margin='dense'    

     fullWidth 

     value={props.value} 

     name={props.name}   

     type={props.type} 

     error={props.error !== ''}

     helperText={props.error !== '' ? props.error : ' '}

     label={props.label} 

     variant= {props.variant}

     id={props.name}   

     InputProps={{

      endAdornment: (

       <FieldIcon name={props.name} />

      ),

     }}

   />

 );

answered Dec 28 '18 at 16:55

Michael Gutz

1465

answered Dec 28 '18 at 16:55

Michael Gutz

1465

answered Dec 28 '18 at 16:55

Michael Gutz

1465

answered Dec 28 '18 at 16:55

Michael Gutz

1465

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk