map doesn't return correct array of object

Question

Tried to do a map to set a value of selected to true and false but it doesn't change existing true value away, what's wrong?

selectTab = tab => e => {
    const { data } = this.state;
    this.setState(
      {
        data: data.map(o =>
          o.tab === tab ? { selected: true, ...o } : { selected: false, ...o }
        )
      },
      () => console.log(this.state.data)
    );
  };

https://codesandbox.io/s/885l8q537l

Answer 1

Try and spread the object first, and then add the selected property. Otherwise the selected property in o will overwrite it every time.

selectTab = tab => e => {
  this.setState(
    prevState => ({
      data: prevState.data.map(o =>
        o.tab === tab ? { ...o, selected: true } : { ...o, selected: false }
      )
    }),
    () => console.log(this.state.data)
  );
};

 class App extends React.Component { state = { data: [ { tab: 1, content: "Tab 1 content", selected: true }, { tab: 2, content: "Tab 2 content" }, { tab: 3, content: "Tab 3 content" } ] }; selectTab = tab => e => { this.setState( prevState => ({ data: prevState.data.map(o => o.tab === tab ? { ...o, selected: true } : { ...o, selected: false } ) }), () => console.log(this.state.data) ); }; render() { const { activeTab, data } = this.state; return ( <div> {data.map(obj => ( <div onClick={this.selectTab(obj.tab)}>{obj.tab}</div> ))} {data.map(obj => ( <div>{obj.selected && obj.content}</div> ))} </div> ); } } ReactDOM.render(<App />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>