CODEWITHSUNDEEP
javascriptreactjstypescriptcomponentsmaterial-ui
Manuel Abascal
Manuel Abascal

Reputation: 6380

Having issues to access props when calling a component in React

I have an FilterSliders component built with Material UI. I have passed a prop called {classes.title} using destructuring const { classes }: any = this.props;. I am trying access the prop when calling the component, but I don't access to it & my code throws an error.

My FilterSliders component:

import './FilterSliders.scss';

import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/lab/Slider';
import PropTypes from 'prop-types';
import React from 'react';

const styles = {
  root: {
    width: '100%',
  },
  slider: {
    padding: '22px 0px',
  },
};

class FilterSliders extends React.Component {
  public static propTypes: { classes: PropTypes.Validator<object>; };
  public state = {
    value: 50,
  };

  public handleChange = (event: any, value: any): any => {
    this.setState({ value });
  };

  public render() {
    const { classes }: any = this.props;
    const { value } = this.state;

    return (
      <div className={`filter__sliders ${classes.root}`}>
        <Typography>{classes.title}</Typography>
        <Slider
          classes={{ container: classes.slider }}
          value={value}
          aria-labelledby='label'
          onChange={this.handleChange}
        />

      </div>
    );
  }
}

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

export default withStyles(styles)(FilterSliders);

Trying to access the title prop when calling the component:

<FilterSliders title='Submitted' />

It doesn't work & throws an error:

Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<InferProps<{ classes: Validator<object>; }>, "classes">, never> & StyledComponentProps<"root" | "slider"> & { children?: ReactNode; }'.
  Property 'title' does not exist on type 'IntrinsicAttributes & Pick<Pick<InferProps<{ classes: Validator<object>; }>, "classes">, never> & StyledComponentProps<"root" |

Update

@Richard suggested me to declare a PropType for title prop...I tried like so:

FilterSliders.propTypes = {
  classes: PropTypes.object.isRequired,
  title: PropTypes.string.isRequired,
};

& like so:

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

I got just errors..

Upvotes: 0

Views: 255

Answers (1)

Titus
Titus

Reputation: 22474

I think you've misunderstood how properties work in React, when you set a property to a component (eg: <FilterSliders title='Submitted' />) that property will be added to the component's this.props object.

In this case, because you're using material-ui, withStyles(styles) will add a classes property to the component that has the same properties as styles (classes names).

So, to access the classes you can use this.props.classes or const { classes }: any = this.props and to access the other properties that the parent component sets you use just this.props.propertyName (eg: this.props.title or const { title }: string = this.props).

Which means that you should be using something like this:

public render() {
    const { classes }: any = this.props;
    const { title }: string = this.props;
    const { value } = this.state;

    return (
      <div className={`filter__sliders ${classes.root}`}>
        <Typography>{title}</Typography>
        <Slider
          classes={{ container: classes.slider }}
          value={value}
          aria-labelledby='label'
          onChange={this.handleChange}
        />

      </div>
    );
  }

And you should also change the component's propType

FilterSliders.propTypes = {
  classes: PropTypes.object.isRequired,
  title: PropTypes.string.isRequired
};

Upvotes: 2

Related Questions