0

Im using React Material-UI design my interface... There is an error coming when I using this particular component in my main layout.. Anyone can help me to find out the solution

  [287] ./src/components/RadioCustom.js 5.42 kB {0} [built] [2 errors]
     + 292 hidden modules

ERROR in ./src/components/RadioCustom.js
Module not found: Error: Cannot resolve module '@material-ui/icons/RadioButtonUnchecked' in c:\Users\Muhammed Suhail\Desktop\redux\ReduxSimpleStarter-master\src\components
 @ ./src/components/RadioCustom.js 27:28-78

ERROR in ./src/components/RadioCustom.js
Module not found: Error: Cannot resolve module '@material-ui/icons/RadioButtonChecked' in c:\Users\Muhammed Suhail\Desktop\redux\ReduxSimpleStarter-master\src\components
 @ ./src/components/RadioCustom.js 31:26-74

This is my RadioCustom.js this code I took from the Material-UI website.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
import Radio from '@material-ui/core/Radio';
import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';

const styles = {
  root: {
    color: green[600],
    '&$checked': {
      color: green[500],
    },
  },
  checked: {},
  size: {
    width: 40,
    height: 40,
  },
  sizeIcon: {
    fontSize: 20,
  },
};

class RadioButtons extends React.Component {
  state = {
    selectedValue: 'a',
  };

  handleChange = event => {
    this.setState({ selectedValue: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <div>
        <Radio
          checked={this.state.selectedValue === 'a'}
          onChange={this.handleChange}
          value="a"
          name="radio-button-demo"
          aria-label="A"
        />
        <Radio
          checked={this.state.selectedValue === 'b'}
          onChange={this.handleChange}
          value="b"
          name="radio-button-demo"
          aria-label="B"
        />
        <Radio
          checked={this.state.selectedValue === 'c'}
          onChange={this.handleChange}
          value="c"
          name="radio-button-demo"
          aria-label="C"
          classes={{
            root: classes.root,
            checked: classes.checked,
          }}
        />
        <Radio
          checked={this.state.selectedValue === 'd'}
          onChange={this.handleChange}
          value="d"
          color="default"
          name="radio-button-demo"
          aria-label="D"
        />
        <Radio
          checked={this.state.selectedValue === 'e'}
          onChange={this.handleChange}
          value="e"
          color="default"
          name="radio-button-demo"
          aria-label="E"
          className={classes.size}
          icon={<RadioButtonUncheckedIcon className={classes.sizeIcon} />}
          checkedIcon={<RadioButtonCheckedIcon className={classes.sizeIcon} />}
        />
      </div>
    );
  }
}

RadioButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RadioButtons);

Anyone please help to findout the solution.. because I'm new to react..

1 Answer 1

2

you probably forgot to install the dependency : npm install @material-ui/icons --save should solve the problem

https://material-ui.com/getting-started/installation/#svg-icons

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.