CODEWITHSUNDEEP
javascriptreactjsreact-nativejsx
Edenco
Edenco

Reputation: 147

How can access an array in the class component from functional component?

I try to use my array from fetch to render few Cards. I have a MyCard component that need information from array that is loaded in the class component. But how do I access this array?

 class Customer extends Component {
 constructor() {
    super();
    this.state = {
      customers : []
    };

  componentDidMount() {

  fetch(.....etc ...etc..({ customers: json}))

 }


render () {
    return (   
    <div>
    <CustomerGrid/> 
    </div> ) 
  }   
  }
 export default Customer;

And here is functional component CustomerGrid where I need to use the array from Customer class. Now I am thinking object oriented. How can I access the array in the class from my function?

  import React from 'react';
  import Grid from '@material-ui/core/Grid';
  import CustomerCard from '../CustomerCard/CustomerCard';
  import Customer from '../Customer/Customer';
  const CustomerGrid = () => (
    <div>
    <Grid container>
    <Grid item xs={4}>
      {this.state.Customer.customers.map(card => (
      <div className="cards">
        <CustomerCard title={card.CustomerName} custType= {card.CustomerType}></CustomerCard>
      </div>
    ))}
    </Grid>
  </Grid>
  </div>
);

export default CustomerGrid;

Upvotes: 0

Views: 145

Answers (1)

DABE
DABE

Reputation: 112

Have you try pass it as a prop? ex: <CustomerGrid customers={this.state.customers} />

Upvotes: 3

Related Questions