title: React Native Redux - How to Update an Item in an Array?
body: <p>I am a newbie with React Native and Redux, building a quiz app now. </p>
  
  <p>I want to update an item (name) in an array. Could somebody let me know what is wrong with my following code:</p>
  
  <pre><code>export const setName = name =&gt; ({
    type: "ADD_NAME",
    id: 1,
    name: name
  });
  
  INITIAL_STATE = [
    {
      id: 1,
      question: "documentary",
      answers: [
        { id: "1", text: "記録映画" },
        { id: "2", text: "理科" },
        { id: "3", text: "自由" },
        { id: "4", text: "形" }
      ],
      name: 0
    },
    {
      id: 2,
      question: "cozy",
      answers: [
        { id: "1", text: "居心地の良い" },
        { id: "2", text: "関係する" },
        { id: "3", text: "ブレーク" },
        { id: "4", text: "車" }
      ],
      name: 0
    },
    {
      id: 3,
      question: "utmost",
      answers: [
        { id: "1", text: "最大限" },
        { id: "2", text: "疑問に思う" },
        { id: "3", text: "昨日" },
        { id: "4", text: "まだ" }
      ],
      name: 0
    }
  ];
  
  const reducer = (state = INITIAL_STATE, action) =&gt; {
    switch (action.type) {
      case "ADD_NAME":
        return state.map((item, index) =&gt; {
          if (item.id === 1) {
            return {
              ...item,
              name: ""
            };
          }
          return item;
        });
  
      default:
        return state;
    }
  };
  
  export const reducers = combineReducers({
    user: reducer
  });
  
  // store.js
  export const store = createStore(reducers);
  </code></pre>
  
  <p>It worked first when there was just one array. Like this</p>
  
  <p>INITIAL_STATE = {
      id: 1,
      question: "documentary",
      answers: [
        { id: "1", text: "記録映画" },
        { id: "2", text: "理科" },
        { id: "3", text: "自由" },
        { id: "4", text: "形" }
      ],
      name: 0
    }</p>
  
  <p>But it doesn't after adding more arrays and changing the actions and the reducers. This is the rest of code Home.js (container+component) </p>
  
  <pre><code>export class Home extends Component {
    render() {
      return (
        &lt;View style={{flex: 1, justifyContent: 'space-around', alignItems: 'center'}}&gt;
          &lt;Text style={{marginTop: 100}}&gt;My name is {this.props.name}.&lt;/Text&gt;
          &lt;View style={{flexDirection: 'row'}}&gt;
            &lt;Button
              onPress={() =&gt; this.props.setName(1)}
              title="setName"
            /&gt;
            &lt;Button
              onPress={() =&gt; this.props.setName('2')}
              title="setName"
            /&gt;
          &lt;/View&gt;
          &lt;Text style={{marginBottom: 100}}&gt;現在のstore: {JSON.stringify(store.getState())}&lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  }
  
  const mapStateToProps = state =&gt; ({
    name: state.user.name
  })
  
  const mapDispatchToProps = {
    setName,
    deleteName
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Home)
  
  </code></pre>