将props.children传递到有条件渲染的组件

Question

I have Product component that renders a modal component based on a showModal boolean value in the Product component state. This is the render method in Product

  render() {
    const { .... } = this.props.data;
    return (
      <>
        {this.state.showModal && (
          <Modal
            product={this.props.data}
            toggleModal={this.onToggleModal}
            addToCart={this.props.onAddToCart}
          />
        )}
        <li className="product-body">
          <img
            src=".."
            onClick={this.onToggleModal}
          />
          <h2>{...}</h2>
          <h3>{..}</h3>
          <h3>{..}</h3>
          <h2 className="product-price">{...}</h2>
          <button type="button" onClick={this.props.onAddToCart}>
            Buy now
          </button>
        </li>
      </>
    );
  }

I want to pass down the content inside li to the Modal .How can I make use of props.children in this case for the Modal component, so I dont have to pass down the data to be displayed as props ?

Answer 1

If Modal is another component then you can pass the list as

     render() {
        const { .... } = this.props.data;
        return (
          <>
            {this.state.showModal && (
              <Modal
                product={this.props.data}
                toggleModal={this.onToggleModal}
                addToCart={this.props.onAddToCart}
              >
              <ListItems {...this.props}/>    
              </Modal>
            )}
              <ListItems {...this.props}/>
          </>
        );
      }

Let the ListItems be a separate component as

class ListItems extends React.Component {
        render() {
           return(
           <li className="product-body">
                  <img
                    src=".."
                    onClick={this.onToggleModal}
                  />
                  <h2>{...}</h2>
                  <h3>{..}</h3>
                  <h3>{..}</h3>
                  <h2 className="product-price">{...}</h2>
                  <button type="button" onClick={this.props.onAddToCart}>
                    Buy now
                  </button>
                </li>
            )}

}

Answer 2

class ListItems extends React.Component {
    render(){
        return(
            <li className="product-body">
                <img
                    src=".."
                    onClick={this.onToggleModal}
                />
                <h2>{...}</h2>
                <h3>{..}</h3>
                <h3>{..}</h3>
                <h2 className="product-price">{...}</h2>
                <button type="button" onClick={this.props.onAddToCart}>
                    Buy now
                </button>
            </li>
        )
    }
}

class Wrapper extends React.Component {
    render(){
        return (
            <Modal
                product={this.props.data}
                toggleModal={this.onToggleModal}
                addToCart={this.props.onAddToCart}
            >
                <ListItems />
            </Modal>
        )
    }
}
class Modal extends React.Component {
    render(){
        return (
            <div>
                <h1>Modal Title</h1>
                <div>{this.props.children}</div>
            </div>
        )
    }
}