Having issues to access props when calling a component in React

Active3 hr before
Viewed126 times

8 Answers


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.,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.,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).

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}`}>
          classes={{ container: classes.slider }}

load more v

And with that, the App component now has a props called name; you can call on it from the class using this. Let me show you how I greet myself:,The use of props allows you to reuse more React code and avoid repeating yourself. In the case of our example, you can reuse the same Greeting component for many different people:,You can make a mistake and forget to pass a required prop into the component that needs it:

 Pretag team - issue, fix, solve, resolve

You can also use an ES6 class to define a component:,This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.,Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
load more v

This problem is also common in accessing component props:,A React component must have a name which starts with a capital letter.,This problem is also common in arrow functions' short syntax.

class greeting extends React.Component {
   // ...
load more v

React has a different approach to data flow & manipulation than other frameworks, and that’s why it can be difficult at the beginning to understand some concepts like props, state and so on.,In my previous article, I’ve shown how to create & call a React component inside another component. So in this example, we have a ParentComponent including another component (child):,Likewise, we can do the same for React components. We can define our own attributes & assign values with interpolation { }:

In my previous article, I’ve shown how to create & call a React component inside another component. So in this example, we have a ParentComponent including another component (child):

class ParentComponent extends Component {    render() {    return (      <h1>        I'm the parent component.        <ChildComponent />      </h1>    );  }}
load more v

By keeping the value  asynchronously in a ref, we can bypass stale references. If you need to know more about ref in functional components, React’s documentation has a lot more information.,To be even more clear, let’s play around with the same stale reference example React has in its documentation.,We are going to make this more scalable by giving ref the value of the state automatically when the state changes.


const [count, setCount] = useState(0);
const ref = useRef(count);

useEffect(() => {
   ref.current = count
}, [count])
load more v

Most components can be customized when they are created, with different parameters. These created parameters are called props, short for properties.,For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.,With props and the basic Text, Image, and View components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to learn about State.

 Pretag team - issue, fix, solve, resolve

Normally we start with the JSX syntax in React to render some output to the browser. Essentially, JSX is a mix of HTML and JavaScript and tries to get the best out of both these languages.,Let's have a look at the below code where we pass the message from App to HelloReact component:,Below is an example of a basic React component:

1import React, { Component } from 'react';
2class App extends Component {
3  render() {
4    const hello = 'Say Hello to learning Props/State in React!';
5    return (
6      <div>
7        <h1>{hello}</h1>
8      </div>
9    );
10  }
12export default App;
load more v

Other "calling-having" queries related to "Having issues to access props when calling a component in React"