Getting Typeerror: This.Props Is Undefined on Reactjs

React this.props is undefined

I think you're missing the following, try replacing your constructor:

constructor(props) {
    super(props);

    console.log(this.props)
}

Try it out, you should get output from this.props.

The constructor for a React component is called before it is mounted.
When implementing the constructor for a React.Component subclass, you
should call super(props) before any other statement. Otherwise,
this.props will be undefined in the constructor, which can lead to
bugs. Source: ReactJS.org Component Docs.

How to fix "TypeError: this.props is undefined" in React

Look at the error: "TypeError: this.props.main is undefined".
It means that you don't have a 'main' property inside props object.
But you do pass it into the "main" property in your jsx, but the question is what are you passing:

<Main main={this.state.main} /> => you are trying to pass the 'main' property of the state object, but it does not exists. You only have 'types' and 'states' properties.

So, you have 2 options:

1. renaming one of those to 'main' and leave code as it is.

2. pass one of the other state properties, e.g <Main main={this.state.states} />.

React props undefined on receiving

You have passed a location object to history.push so the component can find the corresponding state there.

useEffect(() =>{
  console.log(props.location.state.questions)
  console.log(Object.values(props.location.state.questions))
  checkAnswer()
})

React : props are undefined but when i console.log(props), it works

It is because your data is not loaded when your component is first time loaded. Try this:

const Post = ({post}) => {
if(post){
 const {author, date_creation, message} = post // You can destructure here 
 return (
    // ....
  );
}
else return null;
};

OR

Load the above component if you received all your data

 return (
    <div className="posts">
      <Post />
      {dataApi && dataApi.length > 0 && dataApi.map((post) => {
        return <Post post={post} key={uuidv4()} />;
      })}
    </div>
  );

React - TypeError: Cannot read property 'props' of undefined

You rewrite the context of the class method when you pass it to props like this because of JS OOP system. So to make it work there are several approaches:

1) This is not so good because bind always returns new function and your component will re-render even if there are no updates in props

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="App">
                <StreetFighter />
            </div>
        );
    }
}

class StreetFighter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            characters: [
                'Chun-Li',
                'Guile',
                'Ryu',
                'Ken',
                'E.Honda',
                'Dhalsim',
            ],
        };
    }
    render() {
        let characters = this.state.characters;
        characters = characters.map((char, index) => {
            return (
                <Character char={char} key={index} onDelete={this.onDelete.bind(this)} />
            );
        });
        return (
            <div>
                <p>Street Fighter Characters</p>
                <ul>{characters}</ul>
            </div>
        );
    }
    onDelete(chosenCharacter) {
        let updatedCharactersList = this.state.characters.filter(
            (char, index) => {
                return chosenCharacter !== char;
            }
        );

        this.setState({
            characters: updatedCharactersList,
        });
    }
}

class Character extends Component {
    render() {
        return (
            <li>
                <div className="character">
                    <span className="character-name">{this.props.char}</span>
                    <span
                        className="character-delete"
                        onClick={this.handleDelete.bind(this)}
                        > x </span>
                </div>
            </li>
        )
    };

    handleDelete() {
        this.props.onDelete(this.props.char);
    }
}


export default App;

2) In my code I use arrow functions as class properties for such cases (it's one of the most common solutions, I think)

class Character extends Component {
    render() {
        return (
            <li>
                <div className="character">
                    <span className="character-name">{this.props.char}</span>
                    <span
                        className="character-delete"
                        onClick={this.handleDelete}
                        > x </span>
                </div>
            </li>
        )
    };

    handleDelete = () => {
        this.props.onDelete(this.props.char);
    }
}

Props are undefined in React

You should not hold on to the e.target reference and you must be getting a React warning in your console about it? You just created a memory leak in your app.

Instead copy what you need from the target and let the reference be garbage collected. Although in your case there's no need to be attaching data to the DOM node:

<Button onClick={() => this.handleSelection(this.setColour(3))}>MainButtonC</Button>

Note you don't need key={3} unless you're mapping the elements in a loop.

handleSelection = (color) => {
    this.setState({ selected: color })
}

However this code is a bit strange, just record the index of the clicked button and give it a class to style it e.g.

class MainButtonsGroup extends React.Component {
  state = {
    selectedIndex: null,
  }

  handleSelection = (index) => {
    this.setState({selectedIndex: index})
  }

  render() {
    const idx = this.state.selectedIndex;

    return (
      <ButtonGroup>
        <Button className={idx === 1 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(1)}>MainButtonA</Button>
        <Button className={idx === 2 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(2)}>MainButtonB</Button>
        <Button className={idx === 3 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(3)}>MainButtonC</Button>
      </ButtonGroup>
    );
  }
}

Uncaught TypeError: this.props.history is undefined

your props are empty and don't have instance of history , to provide history instance you need to wrap your component with export default withRouter(Main)

but withRouter has been deprecated in react-router-dom v6 so if you are using this version or above then kindly write a HOC for withRouter

here is a reference to use withRouter for v6 and above version of react-router-dom

https://github.com/remix-run/react-router/issues/7256

---

Related Topics