React Redux: Update and replace records with another records returns value of 1

React Redux: Update and replace records with another records returns value of 1.

On the server side, I have a json response [{"id":"10", "food_name":"Rice"}]

The code below works fine by displaying a food item called Rice from the database via API Call as showed in the json array above.

Now I have a requirements to replace the displayed food item Rice with Beans.

To this effect, I have a json files which is to be returned via API Call after posting

[{"id":"10", "food_name":"Beans"}]

I have also created a Post button which should send data to the server side and return the response Beans.

Here is my effort as well as my Issue which is caused by reducer.

If Implement the code below in the reducer

case foodConstants.FOOD_SUCCESS_POST:
 return {
items: state.items.map(food1 => {
        if (food1.id === action.id) {
//return { ...food1, food_name: state.items[0].food_name};
return { ...food1, food_name: 'Beans' };
          }

The Code works fine and Rice is replaced with Beans since I set value beans in the reducer.

but since I need to get the records via API Call so if implement

case foodConstants.FOOD_SUCCESS_POST:
 return {
items: state.items.map(food1 => {
        if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
          }

Am getting value of 1 replacing Rice instead of Beans. Please where is this value of 1 coming from. I need to have beans replace record Rice as a value returned from API Call. My action and service code are okay as I can see the json returned records in the array as per

[{"id":"10", "food_name":"Beans"}]

I think my problem lies in this line of code below which returns value of 1 instaed of Beans.

return { ...food1, food_name: state.items[0].food_name};

Here is the full code

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { foodActions } from 'actions';

class App extends React.Component {

constructor(props) {
        super(props);
this.state = {};

    }
    componentDidMount() {
this.props.dispatch(foodActions.getFood());
    }

 handleFood(id,food_type) {
    return (e) => this.props.dispatch(foodActions.postfood(food_id));

    }

    render() {
        const { food1, foods1 } = this.props;
        return (
            <div>           
   {foods1.items &&
                    <ul>
                        {foods1.items.map((food1, index1) =>
                            <li key={food1.id}>
                                {food1.food_name} 
<input type="button" value="Post and Update Food Name"  onClick={this.handleFood(food1.id)}  />
</li>
                        )}

                    </ul>
                }
            </div>
        );
    }
}
function mapStateToProps(state) {

    const { foods1} = state;
    const { food1 } = state;
    return {
        food1, foods1
    };
}

const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App };

Reducer Code

import { foodConstants } from '/constants';
export function foods1(state = {}, action) {
  switch (action.type) {

case foodConstants.GETALL_REQUEST:
  return {loading: true};
case foodConstants.GETALL_SUCCESS:
  return {
    loading: false,
    error: null,
items: action.foods1,
  };
case foodConstants.GETALL_FAILURE:
      return { 
        error: action.error
      };


// Post and Update Food Name

 case foodConstants.FOOD_REQUEST_POST:
 return {...state};
 case foodConstants.FOOD_SUCCESS_POST:
 return {
items: state.items.map(food1 => {
        if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};

          }

          return food1;
        })
      };
    case foodConstants.FOOD_FAILURE_POST:
 return { 
        error: action.error
      };

    default:
      return state
  }
}