CODEWITHSUNDEEP
node.jsreactjsmongodbexpress
tifawt
tifawt

Reputation: 1

the results of my api (back end part) is not displayed in the front end part using reactjs

enter image description here I am a beginner in nodejs and reactjs and I am developing a simple application. I am now in the front part, I installed all the necessary packages and modules. I launched my front part but nothing is displayed here is a screenshot of the result obtained. thank you in advance

And here a part of my code in reactjs 

import React from 'react';
import {connect} from 'react-redux'; 
import {fetchVideos} from '../actions/videoActions';
var listVideos
class videos extends React.Component { 
constructor(props) {
super(props); 
}

componentDidMount() { this.props.fetchVideos(); }

render() { 
if (this.props.data) {    
listVideos = this.props.videos.map(video => 
<li key={video._id}>
{video.titre}
</li>
);


}   
return (

<div>

<center><h1>All videos </h1></center>
{listVideos}   
</div>
)

}
} 

const mapStateToProps = (state, ownProps) => {
return {
clients : state.clients,
};
}

const mapDispatchToProps = (dispatch) => {
return {
fetchVideos :()=> dispatch(fetchVideos())
};
}

export default connect(mapStateToProps, mapDispatchToProps)(videos);

Upvotes: 0

Views: 60

Answers (2)

Ricardo Leon
Ricardo Leon

Reputation: 125

In your component, you are trying to read videos from its props. However, as Luiz mentioned, your mapStateToProps is only mapping the clients state variable to your component. mapStateToProps is the logic that binds redux state with your component props. So, assuming that you have set the videos object on your state (via reducers) and adding the videos mapping on the mapStateToProps you should get said data on your component props.

Upvotes: 0

Luiz Fernando da Silva
Luiz Fernando da Silva

Reputation: 1499

If you are using redux, probably you will need to map the videos in the mapStateToProps method

// ... 

componentDidMount() { this.props.fetchVideos(); }

// ...
const mapStateToProps = (state, ownProps) => {
return {
clients : state.clients,
videos: state.videos // HERE
   };
}

Note the state.videos param is got from the reducer.

Upvotes: 1

Related Questions