Mern problem in displaying data

JavaScript
1

Hello,

I am facing a problem in mern stack. I cannot make a crud application. i have done redux here too.
i can add item, but that item is not showing actually.

in add item i did this in action in redux

export const addItem = (item) => dispatch =>{
    axios.post('/api/profile/add',item)
    .then(res=>dispatch({
        type:ADD_ITEM,
        payload:res.data
    }))
}

in fetching item i used.

export const getItems = () => dispatch =>{
    dispatch(setItemsLoading());
    axios.get('/api/profile')
    .then(res=>dispatch({
        type:GET_ITEMS,
        payload:res.data
    }

in item list where items will be seen react js

{items.map(({_id,item})=>
          (
              <div key={_id}>
                 <h2>{item}</h2>
                 
                 <button className="btn btn-success btn-sm" onClick={this.onDeleteClick.bind(this, _id)}>Delete</button>
              </div>
          )
        )}

please help me how to fix it.

2

Use codesandbox.io and post your code there.

3

i have uploaded in github. please see

4

i want if i add something then the item will be shown, and this is protected only.

5

I took a quick look and couple of things I notice is that add profile on backend doesn’t match Profile schema and on the frontend you have item when it’s items in your redux store.

1 Like
6

yes in models in gave profile, but in redux i gave item because there is only one input field. where u seeing problem can u specify ?

7

On the server in routes/api/profile.js you use title when your schema requires item.

In redux store you have key items (plural), but in ItemList.js you mapStateToProps using item (singular).