在反应路由器中的孩子之间传递数据

Question

I have a problem. The problem is I need somehow to get product id from the ReadProducts component and pass it to ReadOne components, because I can't get an id in function and can't show the product. How can I do this?

The structure is below:

This component is parent for products, to get all and to get one

  class Product extends Component {
      render() {
        return (
          <Switch>
            <Route path='/products' component={ReadProducts} />
            <Route path='/products/:id' component={ReadOne} />
          </Switch>
        )
      }
    };

This one is getting all the products from api

   class ReadProducts extends Component {
      constructor(props) {
        super(props);
        this.state = {
          products: []
        }
        this.getProduct = this.getProduct.bind(this);
      }

      render() {
        const { products } = this.state;

        return(
            <ul>
              {
                products.map(product => (
                  <li key={product.id}>
                    <Link to={`/products/${product.id}`}><button onClick={???}>{product.name}</button></Link>
                  </li>
                ))
              }
            </ul>
        )
      }

    }

This is for reading one product

class ReadOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 0,
      ...
    }
  }

  render() {
    return(
      <div className='pew'>
        {this.state.name}, {this.state.id}...
      </div>
    )
  }
}

The problem is I need somehow to get product id from the ReadProducts component and pass it to ReadOne components, because I can't get an id in function and can't show the product. How can I do this?

Answer 1

Add this in Product.js

We set the initial state of id.

We add setProductId in Product.js because this is where the state of id has to be in order for you to use it in ReadOne.js.

  constructor(props) {
   super(props);
    this.state={
      id:' ',
    }
}
setProductId(id) => {
  this.setState({ id:id })
}

Then pass id down as a prop to ReadOne component.

  <Route path='/products/:id' render={()=> <ReadOne id={this.state.id}/>}>

This is the getter for the id, add this inside of ReadProducts.js

showProduct = (id) => {
  getProduct(id);
}

<Link to={`/products/${product.id}`}><button onClick={this.showProduct(product.id)}>{product.name}</button></Link>

Now you can use id in any component within Product.js

Quick note from the react-router docs.

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component.