CODEWITHSUNDEEP
javascriptreactjs
Krullmizter
Krullmizter

Reputation: 569

Update a component from another component

I'm new to React and I'm wondering if one can update the content of another component based on the events from another component.

I have a two react components. One of the components gets its data loaded to it when the page loads and the other component should have its data rendered based on the first components onClick method.

One of the components gets its data loaded to it from an API, that I then show in a list. I then have a method that should handle the clicked items called itemClicked, when an item gets clicked the data in the other component should update.

itemClicked = () => {
  // Get the ID of the clicked item, and use it in the other component
  console.log(e.target.attributes[0].value);
}

// ...

<ul>
    {items.map(item => (
        <li onClick={this.itemClicked} key={item._id} itemID={item._id}> {item.name} </li>
    ))}
</ul>

I now this might be a bad question to ask, but I'm new to React and trying to learn a bit more about states and props.

Edit.

This is the parent component where I load the two components:

class Dashboard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentItem: {}
        }
    }
    
    onItemClick(item) {
          this.setState({
            currentItem: item
        })                                        
    
    }

    render() {
        return <>
            <div className='dashboard'>
                <div className='dashboard__wrapper'>
                    <SelectItem onItemClick="{this.onItemClick}" />
                    <EditItem item="{this.state.currentItem}" />
                </div>
            </div>
        </>
    }
}

export default Dashboard

I updated the SelectItem component as well:

itemClicked = (e) => {
    console.log(e.target.attributes[0].value);

    if (this.props.onItemClick) {
        this.props.onItemClick(e.target.attributes[0].value)
    }
}

But now it complains that this line:

this.props.onItemClick(e.target.attributes[0].value)

Isn't a function:

Uncaught TypeError: this.props.onItemClick is not a function

Upvotes: 3

Views: 5244

Answers (1)

Wakeel
Wakeel

Reputation: 5002

Sure you can.

If the list component and view component are both in same parent component. The parent component can have a state property e.g.currentItem. The currentItem will be set by passing a callback as property to the list component. The callback should be called when list item is clicked.

//List Component
itemClicked = () => {
  // Get the ID of the clicked item, and use it in the other component
  console.log(e.target.attributes[0].value);
  //call the callback
    if(this.props.onItemClick){
    
       this.props.onItemClick(e.target.attributes[0].value)
    }
}

...

<ul>
    {items.map(item => (
        <li onClick={this.itemClicked} key={item._id} itemID={item._id}> {item.name} </li>
    enter code here
    ))}
</ul>

Page Component

this.state = {
    currentItem: {}
}

onItemClick(item){
      this.setState({
        currentItem: item
    })                                        

}

render(){
   return <>
     <ListComponent onItemClick={this.onItemClick} />
     <ViewComponent item={this.state.currentItem} />
    </>
}

Upvotes: 1

Related Questions