0

So this is my parent class

class ComponentStart extends Component {
    constructor()
    {   
        super();
        this.count = 0;
        this.state = {}; 
        this.repeats = []; 
    }   

    delete_this(index)
    {   
        console.log("I am deleting");
        console.log(index);
        this.repeats = this.repeats.filter( (item) => item != index );
        this.setState({ repeats: this.repeats }); 
    }  
    componentWillMount()
    {   
        for (let i = 0; i < this.props.number; i++)
        {   
            this.repeats.push(<StartMultiple key={this.count} id={this.count} delete_this={this.delete_this.bind(this)}/>);             
            this.count++;
        }       
        this.setState({ repeats: this.repeats});
    }

    componentHasMounted()
    {
    }

    render()
    {
        return(
            <div>
                {this.state.repeats}

                <button onClick={this.add_repeat.bind(this, event)}>clickable</button>
            </div>
        );
    }

And this is the child class:

export default class StartMultiple extends Component {
    constructor()
    {   
        super();
        this.options = [ 1, 2, 3, 4, 5]; 
        this.temp_option = []; 
        this.delete_me = this.delete_me.bind(this);
        this.buttons = [<button key="0" onClick={this.delete_me}/>,<button key="1" onClick={this.delete_me}/>];
        this.state = { buttons: this.buttons };
    }   

    ComponentDidMount()
    {   
        $.ajax({
            url: "src/php/search.php?type=search",
            dataType: "json",
            success: (data) =>
            {   
                console.log(data);
            }   
        }); 
    }   

    delete_this(value)
    {
        console.log(value);
        this.props.delete_this(value);
        return;
    }

    render()
    {
        console.log(this.props);
        return(
            <div>
                <input id={"input" + this.props.id} type="text"/>
                <select>
                    {this.options.map(this.toOptions)}
                </select>
                <div>
                    I am some text
                </div>
                <div>
                    <button onClick={this.hide_info.bind(this)}>hide previous</button>
                    <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } } value={"hi"}>delete</button>
                </div>

                {this.buttons}
            </div>
        );
    }
}

So what happens is that when I click the button in StartMultiple <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } } value={"hi"}>delete</button> it will trigger the parent's delete_this function (which it does).

So basically everything is working fine as I expect, except for the filtering part. I'm not sure why it's not filtering, even though it's correctly passing the component

A. L
  • 9,009
  • 15
  • 53
  • 121

1 Answers1

2

You're comparing React elements that you create:

this.repeats.push(<StartMultiple ... delete_this={this.delete_this.bind(this)}/>);

to index, which will be this, which is the instance of ComponentStart

this.repeats = this.repeats.filter( (item) => item != index );

this isn't what you expect, but don't look up elements in an array by React instance checking. Remove items from an array with data only, such as comparing an ID or an index in the array.

Andy Ray
  • 26,451
  • 11
  • 86
  • 123
  • but I'm passing the value from the child back up to the parent function? So wouldn't it pass the StartMultiple value instead? I'm not too familiar with react so I'm just using logic from vanilla javascript where I'd pass (for example) a button's 'this' to a function which would then remove via filter :\ – A. L Jan 03 '17 at 03:05
  • A new `this` isn't created inside a for loop. http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work – Andy Ray Jan 03 '17 at 03:15
  • I run a `console.log(index instanceof Start);` and it's false, however if i run `console.log(index instanceof StartMultiple);` it is true, meaning that it's functioning as I expect though... – A. L Jan 03 '17 at 03:28
  • oh, my mistake, sorry! I misread the first `bind()` – Andy Ray Jan 03 '17 at 03:31