Updating nested objects in nested arrays in React

Question

Expected effect:

click button -> call function save -> pass object p to function update
update second object{a: 'purple', desc: 'grt', date: '12 -10-2019 '} in colors array, which is in theproducts array

Before update: {a: 'purple', desc: 'grt', date: '12 -10-2019 '}

After update: {a: 'violet', desc: 'gt', date: '12 -12-1980 '}

Error in console.log:

Uncaught TypeError: this.props.product.colors.map is not a function

App

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      products: [  
            {
                colors: [{a:'orange', desc: 'grtrt',  date: '02-12-2019'}, {a:'purple', desc: 'grt',  date: '12-10-2019'}]
                desc: 'gfgfg',

            },
            {
                colors: [{a:'black', desc: 'g',  date: '12-12-2019'},  {a: 'white', {a:'black', desc: 'grtrt',  date: '12-12-2119'}, }, {a:'gray', desc:'', date: '01-01-2000'}],
                desc: 'gfgfgfg',

            }
        ],
        selectProductIndex: 0 //It is first object in products array
        index: 1  //It is second object in colors array
    }
  }

  update = (item) => {
    const {selectProductIndex} = this.state;

    this.setState(prevState => {
      return {
        products: [
          ...prevState.products.slice(0, selectProductIndex),
          Object.assign({}, prevState.products[selectProductIndex], {colors: item}),
          ...prevState.products.slice(selectProductIndex + 1)
        ]
      };
    });
  }

  render () {

    return (
        <div>
          <Items
            product={this.state.products[this.state.selectProductIndex]} 
            update = {this.update}
          /> 
        </div>

    )
  }

Items

class Items extends Component {


  render () {

    return (
      <ul>    
            {       
              this.props.product.colors
                .map((item, index) => 
                  <Item
                    key= {index}
                    index = {index}
                    time = {item}
                    update = {this.props.update}        
                  />
                )
            }
          </ul>   
      </div>      
    );
  }
}

Item

class Item extends Component {

  save = () => {
    const p = {
      a:'violet', desc: 'gt',  date: '12-12-1980'
    }

    this.props.update(p)
  }



  render() {

    return (
      <div>
        <button onClick={this.save}>Save</button>

      </div>
    )
  }
}

Shubham Khatri · Accepted Answer · 2019-06-19 10:08:46Z

You need to pass the index of the colors item and then update it accordingly

class Item extends Component {

  save = () => {
    const p = {
      a:'violet', desc: 'gt',  date: '12-12-1980'
    }

    this.props.update(p, this.props.index)
  }



  render() {

    return (
      <div>
        <button onClick={this.save}>Save</button>

      </div>
    )
  }
}

and then in the topmost parent

 update = (item, colorIndex) => {
    const {selectProductIndex} = this.state;

    this.setState(prevState => {
      return {
        products: [
          ...prevState.products.slice(0, selectProductIndex),
          Object.assign({}, prevState.products[selectProductIndex], {colors: prevState.products[selectProductIndex].colors.map((it,idx) => {
                if(idx === colorsIndex) { return item} 
                return it;
          })}),
          ...prevState.products.slice(selectProductIndex + 1)
        ]
      };
    });
  }

Working demo

const { Component } = React;
class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      products: [  
            {
                colors: [{a:'orange', desc: 'grtrt',  date: '02-12-2019'}, {a:'purple', desc: 'grt',  date: '12-10-2019'}],
                desc: 'gfgfg',

            },
            {
                colors: [{a:'black', desc: 'g',  date: '12-12-2019'}, {a:'black', desc: 'grtrt',  date: '12-12-2119'}, {a:'gray', desc:'', date: '01-01-2000'}],
                desc: 'gfgfgfg',

            }
        ],
        selectProductIndex: 0,
        index: 1
    }
  }

   update = (item, colorIndex) => {
      const {selectProductIndex} = this.state;

      this.setState(prevState => {
        return {
          products: [
            ...prevState.products.slice(0, selectProductIndex),
            Object.assign({}, prevState.products[selectProductIndex], {colors: prevState.products[selectProductIndex].colors.map((it,idx) => {
                  if(idx === colorIndex) { return item} 
                  return it;
            })}),
            ...prevState.products.slice(selectProductIndex + 1)
          ]
        };
      });
    }

  render () {

    return (
        <div>
          <Items
            product={this.state.products[this.state.selectProductIndex]} 
            update = {this.update}
          /> 
        </div>

    )
  }
}

class Items extends Component {
  render () {

    return (
      <ul>    
            {       
              this.props.product.colors
                .map((item, index) => 
                  <Item
                    key= {index}
                    index = {index}
                    time = {item}
                    update = {this.props.update}        
                  />
                )
            }
          </ul>     
    );
  }
}

class Item extends Component {

  save = () => {
    const p = {
      a:'violet', desc: 'gt',  date: '12-12-1980'
    }

    this.props.update(p, this.props.index)
  }



  render() {

    return (
      <div>
        <pre>{JSON.stringify(this.props.time)}</pre>
        <button onClick={this.save}>Save</button>

      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<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="app" />

I see only buttons in demo. Where I can see result ?. In console.log I I can't see nothing

Collectives™ on Stack Overflow

Updating nested objects in nested arrays in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related