Display List group (which is in Array ) in Modals

Hi there,

please provide us with more details about what you want to achieve. How exactly does your implementation look? Do you pass items as a prop? If you store data in an array you can use e.g arrays map method to render items.

Best, Ania

Hi Ania,

For Example:-

1) while using the submit button (View Brand)

2) I am getting List in modal perfectly

3) Using 'MDBListGroupItem'

But as I said my brand list is in array ,so how can I use that array instead of that 'MDBListGroupItem' while submiting button.

Hi there, you can use map function - for example, extract ViewBrands component to the separate file,

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter, MDBListGroupItem } from 'mdbreact';

class ViewBrand extends Component {
  state = {
    modal: false
  }

  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  }

  render() {
    return (
      <MDBContainer>
        <MDBBtn onClick={this.toggle}>Modal</MDBBtn>
        <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
          <MDBModalHeader toggle={this.toggle}>Brands</MDBModalHeader>
          <MDBModalBody>
            {this.props.brandList.map(brand => (
              <MDBListGroupItem key={brand}>{brand}</MDBListGroupItem>
            ))}
          </MDBModalBody>
          <MDBModalFooter>
            <MDBBtn color="secondary" onClick={this.toggle}>Close</MDBBtn>
          </MDBModalFooter>
        </MDBModal>
      </MDBContainer>
    );
  }
}

export default ViewBrand;

And use that, passing brand array as a prop:

<ViewBrand  brandList={['brand1', 'brand2', 'brand3']} />