Estoy realizando un proyecto en MERN para un curso. Se muestra una lista de paises y al hacer click en cualquiera se abre una nueva pagina mostrando itinerarios con distintas actividades con el siquiente componente:
class CityItinerary extends React.Component {
async componentDidMount(){
const { match: { params } } = this.props;
await this.props.getItineraries(params.cityID);
}
render(){
const {itineraries} = this.props.itinerary;
return (
<div>
<Menu />
<h4>Available MyTineraries:</h4>
<div id="itcontainer">
{itineraries.map((itinerary, index) =>
<div id="itinerary">
<div id="divImg">
<img src={itinerary.profilePic} id="profilePic"></img>
</div>
<div id="itineraryInfo">
<h4>{itinerary.title}</h4>
<div id="feedback">
<p>Likes: {itinerary.rating}</p>
<p>{itinerary.duration} hours</p>
<p>${itinerary.price}</p>
</div>
</div>
<p>{itinerary.hashtag}</p>
<div>
<Activity id={itinerary._id}/>
</div>
</div>
)}
</div>
</div>
)
}
}
const mapStateToProps = (state) => ({
itinerary: state.itinerary,
city: state.city
});
export default connect (mapStateToProps,{getItineraries})(CityItinerary);
Al llamar al componente Activity
que es el que vendría a cargar las actividades debajo de cada itinerario lo que sucede es que me renderiza solamente las actividades del ultimo itinerario cada vez que llamo al componente quedándome todas iguales.
class Activity extends React.Component {
async componentDidMount(){
await this.props.getActivities(this.props.id)
}
render(){
const {activities} = this.props.activity;
return (
<div>
{activities.map(activity =>
<p>{activity.title}</p>
)}
</div>
)
}
}
const mapStateToProps = (state) => ({
activity: state.activity
});
export default connect (mapStateToProps,{getActivities})(Activity);
Imagenes para mostrar a lo que me refiero:
Dejo tambien los reducers y actions para brindar mas informacion:
ActivitiesActions
export const getActivities = (id) => async dispatch => {
await fetch(`http://localhost:5000/activities/${id}`)
.then(res => {
return res.json()
})
.then(datos => {
dispatch({
type: GET_ACTIVITIES,
payload: datos
})
})
.catch(err => {
console.log(err)
})
}
activitiesReducer:
const initialState = {
activities: []
};
export default function(state = initialState, action) {
switch(action.type) {
case GET_ACTIVITIES:
return {
...state,
activities: action.payload
}
default:
return state;
}
}