J’édite la description de cette question, car beaucoup de gens l’ont trouvée il y a longtemps.

Sur tableau de bord administrateur de mon site elearning, j’ai créé une page pour ajouter et supprimer une liste de cours.

import React, Component from 'react';
import  Container, ListGroup, ListGroupItem, Button  from 'reactstrap';
import  CSSTransition, TransitionGroup  from 'react-transition-group';
import v1 as uuid from 'uuid';
import connect from 'react-redux';
import getItems,deleteItem from '../actions/itemActions';
import PropTypes from 'prop-types';
import Route, Link from 'react-router-dom';

class CourseList extends Component{

    componentDidMount()   //lifecycle method of react ; to be run when api request or calling an action
        this.props.getItems();
    

onDeleteClick = id =>
    this.props.deleteItem(id);
;

    render()
        const  items  = this.props.item;

        return(
            
                
                    
                        items.map((id,name) => (
                            
                                

                                    
                                    nameitems.name Lesson Page
                                

                            
                        ))
                    
                
            
        );
    

}

CourseList.propTypes = 
    getItems: PropTypes.func.isRequired,
    item: PropTypes.object.isRequired


const mapStateToProps = (state)=>(
    item: state.item
);


export default connect(mapStateToProps, getItems,deleteItem)(CourseList);

Ce code est responsable de la création de chaque article (phy, chem) sur la page du cours, comme indiqué dans l’image suivante:
entrez la description de l’image ici

Tout ce que je veux, c’est ajouter des leçons pour chaque cours.

Ainsi, lorsque j’ajoute un nouveau cours (par exemple: mathématiques) et que je clique dessus, cela m’amène à une nouvelle page où je peux y ajouter des leçons (par exemple: algèbre, géométrie). Voir l’image suivante: entrez la description de l’image ici

J’utilise Redux, et le fichier itemReducer associé au magasin Redux est:

import v1 as uuid from 'uuid';
import GET_ITEMS, ADD_ITEM, DELETE_ITEM from '../actions/types';

const initialState=
    items:[
         id: uuid() ,name:'Maths',
         id: uuid() ,name:'Physics',
         id: uuid() ,name:'Chemistry'
    ]


export default function(state=initialState,action)

    switch(action.type)
    
        case GET_ITEMS:
            return
                ...state
            ;
        case DELETE_ITEM:
            return
                ...state,
                items: state.items.filter(item=>item.id!==action.payload)
            ;
        case ADD_ITEM:
            return
                ...state,
                items: [action.payload, ...state.items]   //spread operator:cuz we can't mutate the state, so we make a copy of it using this operator
            ;
        default:
                return state;
    


Fondamentalement, je veux ajouter des catégories d’enfants (sur une nouvelle page) pour chaque catégorie de parents ajoutée.

Vous pouvez aussi composer votre précis programme d’affiliation sur vos différents produits et prestation dans l’hypothèse ou vous le souhaitez.
Et autrement encore !!!


0 commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *