如何在Reactjs中的页面之间传输数据

Question

I am trying to transfer data back to my class component from DropDownItem component and I can't do it with props. in this example, I want to transfer props.product of the clicked item to my App Component. could anyone tell me what is the best way to do it? thanks in advance.

when I'm clicking on a drop down option I want to show it as an instance in my main class component. I already tried to create a special component for this purpose, but it makes the code really complicated.

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      products: []
    }
  }

  async fetchDevices() {

    const url = 'my url';
    const response = await fetch(url, { method: 'GET', headers: headers });
    const data = await response.json()
    this.setState({ products: data.value })
  }


  componentDidMount() {
    this.fetchDevices();
  }

  render() {
    const productItems = this.state.products.map((productValue, index) => {
      return (<DropDownItem key={index} product={productValue.name} />)
    })

    return (
      <div>

        {this.state.products[0] && Array.isArray(this.state.products) ?
          <div>
            <DropdownComponent
              isOpen={this.state.dropdownOpen}
              toggle={this.toggle}
              product={productItems}
            />
          </div> :
          <div>loading...</div>}
        <p></p>
      </div>

    )
  }
}

export default App

function DropDownItem(props) {
  return (
    <div>
      <DropdownItem onClick={() => console.log("selected product", props.product)}>
        {props.product}</DropdownItem>
      <DropdownItem divider />
    </div>
  )
}
export default DropDownItem

I want to show the selected item in my App component

Answer 1

The general rules for data transfer between components are:

• To transfer from parent component ( App in your case) to child ( DropDownItem ) use props
• To transfer from child to parent (what you want to do) - use callbacks with relevant parameters

Example (not tested, just to show idea)

// App component
...
selectDropDownItem(item) {
    this.setState({selectedItem: item});
}

render () {
    return 
    // ...
    <DropdownComponent
      isOpen={this.state.dropdownOpen} 
      toggle={this.toggle}
      product={productItems}
      selectItemCallback={this.selectDropDownItem.bind(this)}/>
    //...

// DropDownItem component

function DropDownItem (props) {

 return (
<div>

// bind to props.product so when called props.product will be passed as argument
<DropdownItem onClick={props.selectItemCallback.bind (null, props.product)}>
{props.product}</DropdownItem>
<DropdownItem divider/>
</div>
)  
}

export default DropDownItem

General idea is that you pass callback from your parent down to child. When child needs to communicate to parent it just calls callback passed in props and pass required data as arguments to this callback (in your example this can be selected item)