N
N
newhack2020-04-24 14:01:16
JavaScript
newhack, 2020-04-24 14:01:16

Oh, it's hard guys, why doesn't it work?

child components do not work.

eypeError: Cannot read property 'map' of undefined is thrown,

checking nothing comes to child components.

Why is nothing coming?

class Videomain extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            videos: [],
            selectedVideo: null,
        }

       this.onVideoSelect  = this.onVideoSelect .bind(this)
        this.addVal = this.addVal .bind(this)

        const token = localStorage.getItem("token")
        // eslint-disable-next-line no-unused-vars
        let login = true;
        if(token === null) {
            login = false
        }
        this.state = {
            login
        }
        console.log(login)
    }



    onVideoSelect = (video) => {
        this.setState({selectedVideo: video});
    }

    componentDidMount() {
        this.addVal('Start')
    }


    addVal = async (searchWord) => {
        const response = await j.get('name', {
            params: {
                part:'name'
            }
        });
        this.setState({videos: response.data.items, selectedVideo: response.data.items[0]})
    }

    render() {
        if (this.state.login === false) {
            return <Redirect to="/"/>
        }
        const {videos, selectedVideo} = this.state
        return (
            <div className="app" style={styleApp}>

                <Row justify="center">
                    <Col xs={20} sm={20}>
                        <Link to="/logout">" Выход</Link>
                        <Search onSubmit={this.addVal}/>
                    </Col>
                </Row>
                <Row justify="center">
                    <Col xs={24} sm={14}>
                        <Video video={selectedVideo}/>
                    </Col>
                    <Col xs={24} sm={6}>
                        <VideoItems videos={videos} onVideoSelect={this.onVideoSelect}/>
                    </Col>
                </Row>
            </div>
        );
    }
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
N
no-taktik, 2020-04-26
@no-taktik

Try removing the second this.state =... from the constructor. You are redefining state, there are no more videos there, so it is undefined
It seems that the code is copied from another component (=

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question