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']} />

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,

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