[Solved] How to achieve this feature [closed]

by


I made this one:

https://snack.expo.io/H1rGEMRAr

I used ‘state’ to control what was inside of emptyCircles

constructor(props) {
    super(props);
    this.state = {
      emptyCircles: [{
        image: placeholder,
      },{
        image: placeholder,
      },{
        image: placeholder,
      },{
        image: placeholder,
      }]
    };

    this.clearEmptyCircles = this.clearEmptyCircles.bind(this);
    this.addCircle = this.addCircle.bind(this);
  }

And wrote some functions to update that state:

  clearEmptyCircles() {
    this.setState({emptyCircles: [{
        image: placeholder,
      },{
        image: placeholder,
      },{
        image: placeholder,
      },{
        image: placeholder,
      }]})
  }

  addCircle(image) {
    const list = this.state.emptyCircles.slice(0);
    const firstNonEmpty = list.find(p => !p.taken);
    if (firstNonEmpty) {
      firstNonEmpty.image = image;
      firstNonEmpty.taken = true;
    }
    this.setState({emptyCircles: list});
  }

4

solved How to achieve this feature [closed]