user94628 user94628 - 1 month ago 15
React JSX Question

React update state in parent from child components

I have child components that receive props from a parent, but on an event (button click) in a child I want to

setState
again with the new props. So the parent passes down all items in a list to the children. In the child prop a button deletes an item in the list. But how can you update the state so the list item is also removed from the view. This is my code:

const Parent = React.createClass({
getInitialState:function(){
return {
items: []
};
},
componentWillMount:function(){
axios.get('/comments')
.then(function(response) {
this.setState({
items: response.data
})
}.bind(this));
},
render() {
return (
<div>
<Child1 data={this.state.items}/>
</div>
);
}
});

export default Parent;

export default function Child1(props){
return(
<div>
{ props.data.map((comment,id) =>(
<p key={id}>
{comment.name}<Delete data={comment.id}/>
</p>
)
)}
</div>
)
}

class Delete extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
Purchase.Action(this.props.data,'remove');
axios.post('/comments', {
item: this.props.data
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
}

render() {
return <Button onClick={this.handleClick}>Delete</Button>;
}
}

module.exports = Delete;


So although the comment is deleted at the server, I want to delete the comment from the component view by updating the state.

QoP QoP
Answer

If you want to delete the comment from the component, you have to update your Parent state.

In order to do that you can create a new method, delete(id), in your Parent component where you remove the deleted item from the state.

const Parent = React.createClass({
    getInitialState:function(){
        return {
            items: []
        };
    },
    componentWillMount:function(){
        this.setState({
            items: [
            {id: 1,name: "Name 1"},
            {id: 2,name: "Name 2"},
            {id: 3,name: "Name 3"}
          ]
        })
    },
    delete(id){
      // axios.post(...)
      let items = this.state.items.filter(item => item.id !== id);
      this.setState({items});
    },
    render() {
        return (
            <div>
                <Child1 
                   data={this.state.items} 
                   handleClick={this.delete} // Pass the method here
                />
            </div>
        );
    }
});

function Child1(props){
    return(
        <div>
            { props.data.map((comment,id) =>(
                    <p key={id}>
                        {comment.name}
                        <Delete 
                           data={comment.id}
                           handleClick={() => props.handleClick(comment.id)} // Pass the id here
                        />
                    </p>
                )
            )}
        </div>
    )
}

class Delete extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <button onClick={this.props.handleClick}>Delete</button>;
    }
}

jsfiddle