TypeError: undefined is not an object (evaluating 'undefined.state') with React-router-dom

Question

I am learning to develop a multi-page app with React Router. I have been following a tutorial and have managed to set up multiple page without any content. However, I want to add the original main content of the home page that was originally running properly before I used react-router. If I delete the code that is in the div called App, I have added in Home.js, then I can go back to switching between blank pages with no errors:

import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";


const home = () => {
    return (
        <div className="App">
            <Title pics={this.state.pics} changePageNumber={this.changePageNumber}/>

            <List parentCallback={this.loadMoviePage} movieList={this.state.movieList}/>

            <Ending toad={this.state.toad} speedUp={this.state.speedUp}/>
        </div>
    );
}

export default home;

So I know that I am not able to access the content from this.state.pics.(Nor the other 3 components). I created this content(and by content I mean the arrays that have the general information, i.e image location, etc). in App.Js so I am wondering how can I pass it in to this new Home.js file?

where is your routing part?

DEEPAK
– DEEPAK

2020-01-07 08:41:03 +00:00
Commented Jan 7, 2020 at 8:41 — DEEPAK
– DEEPAK, Commented Jan 7, 2020 at 8:41

DEEPAK · Accepted Answer · 2020-01-07 08:51:07Z

1

You can not access state in stateless component , if you need some data from another component you need to pass it as props from parent to children , just to show you i just make an example of your code follow it, you will get it

App.js
import React from 'react';
import Home from "./Home";
class App extends Component {
constructor() {
super();
this.state = {
pics: YourArrayDataHere,
};

}


render ()  {
return (
<Home pics={this.state.pics} />
);
}

export default App;
Home.js

    import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";


const home = (props) => { //access throught props
    return (
        <div className="App">
            <Title pics={props.pics} />


        </div>
    );
}

export default home;

answered Jan 7, 2020 at 8:51

DEEPAK

1,57415 silver badges24 bronze badges

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

3 Comments

spontida Over a year ago

Ah I see, so I needed to let react know that home needs to take in props, which tests them from App.js correct? Also this fixes the issue! But now gives another issues in Title.js as I also get a prop by using this.props.pics[0]. However, I do pass in props here. So maybe I am still not understanding correctly?

DEEPAK Over a year ago

simply you can not use this.props if you using functional component

DEEPAK Over a year ago

before using just check with logging with console.log(props), so you will have better idea what is coming through props

Collectives™ on Stack Overflow

TypeError: undefined is not an object (evaluating 'undefined.state') with React-router-dom

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related